如何在 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 发布请求来完成，但我想要一个不涉及 ajax 请求的解决方法。

任何帮助都会很棒。

Answer 1

您不能简单地将 JSON 字符串连接到 HTML，因为它可以包含需要引用的保留字符，例如 "。只需注释掉 .submit() 并检查隐藏的 input 字段，您的代码使用浏览器开发工具中的 DOM Inspector 添加到 DOM。您会看到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= 属性的引用字符串。

来自我使用 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。 this SO question，但提供的答案似乎比我的解决方案更麻烦。使用 npm 模块会更容易，例如entities.

---

或者干脆……

... 不要依赖 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;}">