JSON 格式的 POST 数据

IT技术 javascript json post xmlhttprequest
2021-01-30 09:48: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。

3个回答

不确定你是否想要 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
  };
};
我认为这是一个很好的、干净的、简洁的示例,说明如何在没有 100K 框架的情况下用 20 行代码完成工作。
2021-03-18 09:48:23
@liweijian 如果是这种情况,您需要先对表单值进行 urldecode
2021-03-24 09:48:23
@liweijian 你应该接受任何JSON.stringify回报。
2021-03-31 09:48:23
@IanKuca 似乎帖子数据是由html formnot编码的JSON.stringify
2021-04-02 09:48:23
@IanKuca 谢谢:) 我想知道我们是否可以在没有 urlencode 数据的情况下发送 json 数据?我的意思是我想像"cmd":"<img src=0 onerror=alert(1)>"一样发送数据%3Cimg+src%3D0+onerror%3Dalert%281%29%3E
2021-04-05 09:48:23

这是一个使用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。
2021-03-15 09:48:23
问题询问如何使用javascript 发布数据,而不是 jquery 库。这回答了错误的问题。
2021-03-16 09:48:23
当然,欢迎您以艰难的方式去做。其他人都使用 jQuery。
2021-03-24 09:48:23
这是一个很好的例子,但是根据标题,这应该使用 javascript 执行,而不是 javascript 库(如本例中的 jQuery)
2021-04-05 09:48:23
你们是对的。我已经相应地更新了答案。谢谢!
2021-04-08 09:48:23

使用新的FormData对象(和其他 ES6 内容),您可以这样做将整个表单转换为 JSON:

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

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

那行不通。FormData 对象不能有效地字符串化为 JSON。
2021-03-27 09:48:23