Question

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

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

是sensorID，sensorName，sensorType对应于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>

我有这个输出：

[{
    "name": "version",
    "value": "1.0.1"
}, {
    "name": "sensors[0][sensor]",
    "value": ""
}, {
    "name": "sensors[0][output][0][name]",
    "value": ""
}, {
    "name": "sensors[0][output][0][type]",
    "value": ""
}]

任何人都可以帮帮我吗？我正在努力。但是，由于我是新手，可能会遗漏一些无法解决此问题的原因。如果有人请指导我，这将对我非常有帮助。提前谢谢。

Answer 1

构建您自己的JSON，而不是使用$("#form");，喜欢

     var sensorArr=new Array();
    //push your values to SensorArr
     var data= {
        "version": $("input[name='version']").val(),
        "sensors": [
            {
                "sensor": "sensorID",
                "output": sensorArr;
            }
        ]
    }

并将此data发送给AJAX

Answer 2

如何改变HTML？

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

到

<input class="d_sensors" name='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
}

Answer 3

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

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

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

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

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

2秒：在表单发布请求（AJAX）

中添加此对象

  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()}] } ],

  };

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));
            },

HTML表单数据为JSON格式

3 个答案: