HTML表單數據轉換為JSON格式

Question

我正在嘗試將一些數據從HTML表單發布到Web服務器。 要求是，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-首先 ：從輸入中刪除數組名稱，如下所示：

  <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 個解決方案

解決方案1
0 2014-08-13 07:28:12

解決方案2
0 2014-08-13 07:31:08

解決方案3
0 2014-08-13 07:38:26

HTML表單數據轉換為JSON格式

問題描述

3 個解決方案

解決方案1 0 2014-08-13 07:28:12

解決方案2 0 2014-08-13 07:31:08

解決方案3 0 2014-08-13 07:38:26

解決方案1
0 2014-08-13 07:28:12

解決方案2
0 2014-08-13 07:31:08

解決方案3
0 2014-08-13 07:38:26