以 JSON 格式发布数据答案

【问题标题】：POST data in JSON format以 JSON 格式发布数据
【发布时间】：2010-11-18 08:42:23
【问题描述】：

我有一些数据需要转换为 JSON 格式，然后使用 JavaScript 函数发布。

<body onload="javascript:document.myform.submit()">
<form action="https://www.test.net/Services/RegistrationService.svc/InviteNewContact" method="post" name="myform">
  <input name="firstName" value="harry" />
  <input name="lastName" value="tester" />
  <input name="toEmail" value="testtest@test.com" />
</form>
</body>

这就是帖子现在的样子。我需要它以 JSON 格式提交值并使用 JavaScript 进行 POST。

【问题讨论】：

JSON数据应该有什么结构？只是{"firstName":"harry", "lastName":"tester", "toEmail":"testtest@test.com"}?
是的，数据将采用您描述的格式！感谢您的回复！

标签： javascript json post xmlhttprequest

【解决方案1】：

不确定是否需要 jQuery。

var form;

form.onsubmit = function (e) {
  // stop the regular form submission
  e.preventDefault();

  // collect the form data while iterating over the inputs
  var data = {};
  for (var i = 0, ii = form.length; i < ii; ++i) {
    var input = form[i];
    if (input.name) {
      data[input.name] = input.value;
    }
  }

  // construct an HTTP request
  var xhr = new XMLHttpRequest();
  xhr.open(form.method, form.action, true);
  xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');

  // send the collected data as JSON
  xhr.send(JSON.stringify(data));

  xhr.onloadend = function () {
    // done
  };
};

【讨论】：

我认为这是一个很好、干净、简洁的示例，说明如何在 20 行代码中完成工作，而无需 100K 的框架。
@IanKuca 谢谢:) 我想知道我们是否可以在不对数据进行 urlencode 的情况下发送 json 数据？我的意思是我想发送像"cmd":"<img src=0 onerror=alert(1)>" 这样的数据而不是%3Cimg+src%3D0+onerror%3Dalert%281%29%3E
@liweijian 你应该随JSON.stringify返回。
@IanKuca 看来帖子数据是由html form而不是JSON.stringify编码的。
@liweijian 如果是这种情况，您需要先对表单值进行 urldecode

【解决方案2】：

这是一个使用jQuery的示例...

 <head>
   <title>Test</title>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
   <script type="text/javascript" src="http://www.json.org/json2.js"></script>
   <script type="text/javascript">
     $(function() {
       var frm = $(document.myform);
       var dat = JSON.stringify(frm.serializeArray());

       alert("I am about to POST this:\n\n" + dat);

       $.post(
         frm.attr("action"),
         dat,
         function(data) {
           alert("Response: " + data);
         }
       );
     });
   </script>
</head>

jQuery serializeArray 函数创建一个带有表单值的 Javascript 对象。然后，如果需要，您可以使用 JSON.stringify 将其转换为字符串。你也可以卸载你的身体。

【讨论】：

Josh，jQuery 上的示例显示：看起来更像标准查询字符串而不是 JSON。
你们是对的。我已经相应地更新了答案。谢谢！
这是一个很好的例子，但是根据标题，这应该使用 javascript 来执行，而不是 javascript 库（如本例中的 jQuery）
当然，欢迎您以艰难的方式去做。其他人都使用 jQuery。
问题询问如何使用 javascript 发布数据，而不是 jquery 库。这回答了错误的问题。

【解决方案3】：

使用新的 FormData 对象（和其他 ES6 内容），您可以将整个表单转换为 JSON：

let data = {};
let formdata = new FormData(theform);
for (let tuple of formdata.entries()) data[tuple[0]] = tuple[1];

然后就像 Jan 的原始答案中的 xhr.send(JSON.stringify(data));。

【讨论】：

那行不通。 FormData 对象不能有效地字符串化为 JSON。