Javascript 将HTML表单数据转换为JSON格式_Javascript_Jquery_Html_Json

Javascript 将HTML表单数据转换为JSON格式

javascript jquery html json

Javascript 将HTML表单数据转换为JSON格式,javascript,jquery,html,json,Javascript,Jquery,Html,Json,我正在尝试将一些数据从HTML表单发布到Web服务器。要求是，POST数据应该是JSON数据。来自服务器的预期JSON是 { "version": "1.0.1", "sensors": [ { "sensor": "sensorID", "output": [ { "name": "sensorName",

我正在尝试将一些数据从HTML表单发布到Web服务器。要求是，POST数据应该是JSON数据。来自服务器的预期JSON是

{
    "version": "1.0.1",
    "sensors": [
        {
            "sensor": "sensorID",
            "output": [
                {
                    "name": "sensorName",
                     "type": "sensorType"
                }
            ]
        }
    ]
}

传感器ID、传感器名称、传感器类型对应于HTML表单中的输入字段。其他人应该保持现状。我的代码是：

<html>
   <head>
   <script src="http://code.jquery.com/jquery-latest.min.js"></script>
   </head>
  <body>
    <h2>Create Sensor</h2>
    <form id="form">
    <form enctype='application/json'>
      <input name='version' value='1.0.1'>
      <input name='sensors[0][sensor]' value=''>
      <input name='sensors[0][output][0][name]' value=''>
      <input name='sensors[0][output][0][type]' value=''>
      <br>
      <input id="input" type="submit" name="submit" value="Create Sensor" />
    </form>
    <script>
$.ajaxSetup({
    contentType: "application/json; charset=utf-8",
    dataType: "json"
});

$(document).ready(function () {
    $('#input').click(function () {
        var send = JSON.stringify($("#form").serializeArray());
        alert(send);
        $.ajax({
            url: "http://posttestserver.com/post.php",

            type: "POST",
            data: send,
            success: function (send, status, jqXHR) {
                alert(JSON.stringify(send));
            },

            error: function (jqXHR, status) {
                alert(JSON.stringify(jqXHR));
            }
        });
        return false;
    });
});
    </script>
   </body>
</html>

谁能帮帮我吗？我正在努力。但由于我是新手，可能遗漏了一些东西，这就是为什么我不能解决这个问题的原因。这将是非常有帮助的，如果有人请指导我关于这一点。提前感谢。

使用您自己的JSON格式，而不是使用$Form；，像

并将此数据发送到AJAX

如何更改html

<input name='sensors[0][sensor]' value=''>

到

阅读javascript

var data = {};
data['version'] = $("input[name='version']").val();
data['sensors'] = [];
var sensorsList = $(".d_sensors");
for (var i = 0; i < sensorsList.length; i++) {
  var $item = sensorsList.eq(i);
  var sensor = {};
  sensor['sensor'] = $item.val();
  sensor['output'] = [];
// do same way
}

在您的情况下，您需要设置JSON对象，为什么

因为当Html输入作为数组提交时，每个键都意味着新的数组，您不能按照请求将它们分组到一个对象中，为此，您需要使用自定义javascript数组

这是您案例的完整工作示例

1-首先：从输入中删除数组名称，如下所示：

  <input name='sensors_sensor' value=''>
  <input name='sensors_name' value=''>
  <input name='sensors_type' value=''>

3-第三：如果您想添加更多输入，只需将其添加到formData对象中即可

4-最后：将formData对象添加到Ajax表单并享受

$.ajax({
            url: "http://posttestserver.com/post.php",

            type: "POST",
            data: formData,
            success: function (send, status, jqXHR) {
                alert(JSON.stringify(send));
            },

您在php文件中编写了什么代码来呈现这个问题？还可以尝试打印\u r$\u POST并将结果添加到您的问题中，这可能有助于解决问题。什么都没有。我收到此警报：{readyState:0，responseText:，status:0，statusText:error}您应该获取此文件的代码。我没有获取。在哪里添加打印\u r$\u帖子？你能帮帮我吗？我对这些事情不太了解。只是一个新手。您好，json输出是有效的，但在服务器中发布后，它显示了以下错误：{readyState:4，responseText:，status:400，statusText:Bad Request}检查此链接，这是另一个问题，

var data = {};
data['version'] = $("input[name='version']").val();
data['sensors'] = [];
var sensorsList = $(".d_sensors");
for (var i = 0; i < sensorsList.length; i++) {
  var $item = sensorsList.eq(i);
  var sensor = {};
  sensor['sensor'] = $item.val();
  sensor['output'] = [];
// do same way
}

  <input name='sensors_sensor' value=''>
  <input name='sensors_name' value=''>
  <input name='sensors_type' value=''>

  var fromData = { 
  "version"  : $('input[name=version]').val(),
  "sensors"  : [ { "sensor" : $('input[name=sensors_name]').val(),
                   "output" : [{  "name" : $('input[name=sensors_name]').val() , 
                                  "type": $('input[name=sensors_type]').val()}] } ],

  };

$.ajax({
            url: "http://posttestserver.com/post.php",

            type: "POST",
            data: formData,
            success: function (send, status, jqXHR) {
                alert(JSON.stringify(send));
            },