将HTML表单数据转换为JSON格式
将HTML表单数据转换为JSON格式
提问于 2014-08-13 15:17:10
我正在尝试将一些数据从HTML表单发布到form服务器。要求是，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": ""
}]有谁能帮帮我吗？我在努力尝试。但由于我是新手，可能遗漏了一些东西，这就是为什么不能解决这个问题。这将对我非常有帮助，如果有人能在这方面指导我。提前谢谢。
回答 3
Stack Overflow用户
发布于 2014-08-13 15:28:13
形成您自己的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
Stack Overflow用户
发布于 2014-08-13 15:31:09
换个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
}Stack Overflow用户
发布于 2014-08-13 15:38:27
在您的情况下，您将需要设置JSON对象，为什么!!
因为当以Array的形式提交Html输入时，每个键都意味着新的数组，所以您不能根据请求将它们分组到一个对象中，为此，您需要使用自定义的javascript数组
这是case的完整工作示例
1- first：从输入中删除数组名称，如下所示：
<input name='sensors_sensor' value=''>
<input name='sensors_name' value=''>
<input name='sensors_type' value=''>2- second：在表单post请求( 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- third :如果您想添加更多输入，只需将其添加到formData对象中
Ajax 4-最后:将formData对象添加到Ajax表单并享受
$.ajax({
url: "http://posttestserver.com/post.php",
type: "POST",
data: formData,
success: function (send, status, jqXHR) {
alert(JSON.stringify(send));
},页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25280241
复制相关文章
相似问题
腾讯云开发者
