如何在html中嵌入JSON？

Question

我有一個JSON數組：

info = [{"name":"abc", "rank" : 1},{"name":"xyz", "rank":2},{"name":"pqr", "rank":3}];

我試圖使用jQuery將其作為輸入值傳遞給隱藏字段，並使用POST請求將其發送到服務器。

$('<form action="/info/saveAll" method="POST"/>')
        .append($('<input type="hidden" name="info" value="' + JSON.stringify(info) + '">'))
        .appendTo($(document.body))
        .submit();

在服務器端，我正在訪問info的值：

router.route('/saveAll')
    .post((req, res) => {
       let info = JSON.parse(req.body.info);
       console.log(info); //SyntaxError: Unexpected end of JSON input
    })

如果我在提交之前沒有對數組進行stringify ，那么typeof info仍會在帖子中返回字符串，當我嘗試parse字符串類型時，我會收到語法錯誤，如語法錯誤SyntaxError: Unexpected token o in JSON at position 1 。

我知道這可以通過ajax post請求來完成，但我想要一個不涉及ajax請求的解決方法。

任何幫助都會很棒。

Answer 1

你不能簡單地將JSON字符串連接成HTML，因為它可以包含保留字符，比如" ，需要引用的。只需注釋掉.submit()並檢查代碼添加到DOM的隱藏input字段和DOM瀏覽器開發人員工具中的Inspector。您會看到value=屬性已損壞。

解決方案很簡單：使用encodeURI()代替，即

.append($(
    '<input type="hidden" name="info" value="' +
    encodeURI(JSON.stringify(info)             + 
    '\'>'))

和

let info = JSON.parse(decodeURI(req.body.info));

現在，您將看到該屬性在DOM檢查器中顯示為有效的JSON字符串。 當您在隱藏的input元素上選擇“編輯為HTML”菜單時，您將在HTML文本中看到value= attribute的帶引號的字符串。

從我使用Firefox手動測試：

不正確

const info = {
          test: "somestring",
          html: '<input type="hidden" value="&"/>',
      };
$('#demo').append($(
        '<input type="hidden" value="' +
        JSON.stringify(info))          +
        '">'));

生成的HTML：

<input type="hidden" value="{" test":"somestring","html":"<input="">

正確

const info = {
          test: "somestring",
          html: '<input type="hidden" value="&"/>',
      };
$('#demo').append($(
        '<input type="hidden" value="'   +
        encodeURI(JSON.stringify(info))) +
        '">'));

生成的HTML：

<input type="hidden" value="%7B%22test%22:%22somestring%22,%22html%22:%22%3Cinput%20type=%5C%22hidden%5C%22%20value=%5C%22&amp;%5C%22/%3E%22%7D">

另一種選擇是使用HTML實體編碼/解碼方法，f.ex。 這個問題 ，但提供的答案似乎比我的解決方案更麻煩。 使用npm模塊會更容易，例如實體 。

---

或者只是......

...不依賴於HTML字符串解析，讓jQuery完成所有工作。 它還消除了在服務器端使用decodeURI()的需要：

const info  = {
          test: "somestring",
          html: '<input type="hidden" value="&"/>',
      },
      input = $('<input type="hidden"/>')
          .val(JSON.stringify(info));
$('#demo')
      .append(input);

生成的HTML：

<input type="hidden" value="{&quot;test&quot;:&quot;somestring&quot;,&quot;html&quot;:&quot;<input type=\&quot;hidden\&quot; value=\&quot;&amp;\&quot;/>&quot;}">