javascript - 如何从这个序列化结果到这个 JSON
问题描述
这段代码:
$(document).ready(function() {
var table = $('#listtable').DataTable({
columnDefs: [{
orderable: false,
targets: [1,2,3]
}]
});
$('button').click( function() {
//var data_sent_to_server = JSON.stringify(table.$('input').serializeArray());
var data_sent_to_server = JSON.stringify(table.$('input').serializeArray());
// var data_sent_to_server = JSON.stringify(table.tableToJSON());
$.ajax({
type: "POST",
url: "<?php echo base_url('/material/FromMaterial/');?>",
data: data_sent_to_server,
cache: false,
success: function(data) {
console.log("Data sent to the server: \n\n "+data_sent_to_server);
console.log("Data recieved from the server: \n\n "+data);
},
error: function() {
console.log('Error....');
}
});
//event.preventDefault;
return false;
});
});`
结果如下:
[{"name":"MaterialId","value":"a0GC0000018TPfdMAG"},{"name":"Opportunity","value":"006C000000bpdl2IAA"},{"name":"TotalOrdered","value":"3"},{"name":"MaterialId","value":"a0GC0000014GyBSMA0"},{"name":"Opportunity","value":"006C000000bpdl2IAA"},{"name":"TotalOrdered","value":"0"},{"name":"MaterialId","value":"a0GC0000006v4ZaMAI"},{"name":"Opportunity","value":"006C000000bpdl2IAA"},{"name":"TotalOrdered","value":"0"},{"name":"MaterialId","value":"a0GC000000nl1UxMAI"},{"name":"Opportunity","value":"006C000000bpdl2IAA"},{"name":"TotalOrdered","value":"1"}]
但它应该是这样的:
[
{
"MaterialId":"a0GC0000018TPfdMAG",
"Opportunity":"006C000000bpdl2IAA",
"TotalOrdered":"3"
},
{
"MaterialId":"a0GC0000014GyBSMA0",
"Opportunity":"006C000000bpdl2IAA",
"TotalOrdered":"0"
},
{
"MaterialId":"a0GC0000006v4ZaMAI",
"Opportunity":"006C000000bpdl2IAA",
"TotalOrdered":"0"
},
{
"MaterialId":"a0GC000000nl1UxMAI",
"Opportunity":"006C000000bpdl2IAA",
"TotalOrdered":"1"
}
]
这是 HTML 表
<table id="listtable" class="table table-bordered table-striped table-hover" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Budgeted</th>
<th>Total Ordered</th>
</tr>
</thead>
<tr>
<td>Black Can Liners 43" x 48</td>
<td>Material</td>
<td>3</td>
<td>
<input type="hidden" name="MaterialId" value="a0GC0000018TPfdMAG"/>
<input type="hidden" name="Opportunity" value="006C000000bpdl2IAA"/>
<input type="number" name="TotalOrdered" value="0" pattern="[0-9]*" min="0" max="3">
</td>
</tr>
<tr>
<td>Non-Acid Disinfectant - Per Gl</td>
<td>Material</td>
<td>2</td>
<td>
<input type="hidden" name="MaterialId" value="a0GC0000014GyBSMA0"/>
<input type="hidden" name="Opportunity" value="006C000000bpdl2IAA"/>
<input type="number" name="TotalOrdered" value="0" pattern="[0-9]*" min="0" max="2">
</td>
</tr>
<tr>
<td>Wet Mop-Blue</td>
<td>Equipment</td>
<td>1</td>
<td>
<input type="hidden" name="MaterialId" value="a0GC0000006v4ZaMAI"/>
<input type="hidden" name="Opportunity" value="006C000000bpdl2IAA"/>
<input type="number" name="TotalOrdered" value="0" pattern="[0-9]*" min="0" max="1">
</td>
</tr>
<tr>
<td>Xcelente Multi Purpose Cleaner -Gl</td>
<td>Material</td>
<td>1</td>
<td>
<input type="hidden" name="MaterialId" value="a0GC000000nl1UxMAI"/>
<input type="hidden" name="Opportunity" value="006C000000bpdl2IAA"/>
<input type="number" name="TotalOrdered" value="1" pattern="[0-9]*" min="0" max="1">
</td>
</tr>
</table>
我怎样才能得到这个,任何帮助将不胜感激
解决方案
你真的不需要做任何 JSON 的东西。只需在表单/输入上调用 serializeArray(),使用 ajax 传递结果,然后查看 POST 中的内容。话虽如此,下面是我转换数据的方式。
将输入包装在表单中并为表单提供一个 id。更改您的按钮单击事件侦听器以防止提交表单
$('button').click( function(e) {
e.preventDefault();
}
下面的函数将以您描述的方式返回一个对象。
function jsonFormData (formId) {
const arr = $('#' + formId).serializeArray(), obj = {};
for(let i = 0; i < arr.length; i++) {
if(obj[arr[i].name] === undefined) {
obj[arr[i].name] = arr[i].value;
} else {
if(!(obj[arr[i].name] instanceof Array)) {
obj[arr[i].name] = [obj[arr[i].name]];
}
obj[arr[i].name].push(arr[i].value);
}
}
return obj;
}
推荐阅读
- python - 如何使用 for 循环在 python 中创建 Traingular 移动平均线
- java - 如何在服务器上获取客户端的IP?
- mysql - 如何在 Mysql 中使用子查询来解决这个挑战?
- javascript - 从多个输入中获取所有文件
- c# - 如何找到名称中数字较大的对象?
- python-2.7 - 如何使用 Python 从 hdf 格式的文件名中提取日期?
- c - 如何从 .txt 文件中读取并将每一行分成不同的字符串并将它们存储到不同的结构变量中?
- javascript - Javascript如何对缓冲区中的图像数据进行二值化
- javascript - 如何使用 Promise.all 解构动态数量的异步调用的结果
- django - Django rest 框架:标签序列化器