获取json数组的正确表单语法和相关jquery是什么答案

【问题标题】：what is the correct form syntax and related jquery to get a json array获取json数组的正确表单语法和相关jquery是什么
【发布时间】：2017-11-28 08:38:33
【问题描述】：

我知道 json 应该是什么样子。它是一个包含元素 (A,B,C) 的数组，每个元素在一个数组中有 4 个不同的值。

{
"A":["157","219","",""],
"B":["157","576","",""],
"C":["654","341","",""]
}

尝试解决方案 1：

jQuery(document).on('click', '#btn_save', function(){
    var data = jQuery('#hetfo_form').serialize();
    console.log(data);
});


<button type="button" id="#btn_save"></button>

是的，我没有通过提交事件提交表单，而是在单击表单外的按钮时阅读表单的内容。

<form id="hetfo_form" action="#" method="post">
<select class="form-control" name="A[]">
        <option value="2">......</option>
        <option value="3">......</option>
        ...
</select>
<select class="form-control" name="A[]">
        <option value="2">......</option>
        <option value="3">......</option>
        ...
</select>

<select class="form-control" name="B[]">
        <option value="2">......</option>
        <option value="3">......</option>
        ...
</select>
<select class="form-control" name="B[]">
        <option value="2">......</option>
        <option value="3">......</option>
        ...
</select>

<select class="form-control" name="C[]">
        <option value="2">......</option>
        <option value="3">......</option>
        ...
</select>
<select class="form-control" name="C[]">
        <option value="2">......</option>
        <option value="3">......</option>
        ...
</select>

</form>

上面的代码在控制台上的结果是这样的： A%5B%5D=2&A%5B%5D=&A%5B%5D=40&A%5B%5D=775&A%5B%5D=3&A%5B%5D=‌&A%5B%5D=&A%5B%5D= &A‌%5B%5D=&A%5B%5D=&A%5‌B%5D=&A%5B%5D=

看起来即使我写了 select name="C[]" 它也不被识别为数组 C 而是一个名为 C[] 的变量。括号“[”“]”作为常规字符串处理。

如果我使用 serializeArray() 结果是： serializeArray result

已尝试解决方案 2： 我也尝试创建这个函数：

 function ConvertFormToJSON(form){
     var array = jQuery(form).serializeArray();
     var json = {};

     jQuery.each(array, function() {
         json[this.name] = this.value || '';
     });

     return json;
 }

然后将返回值赋给数据变量：

  jQuery(document).on('click', '#btn_save', function(){
    var data =ConvertFormToJSON('#hetfo_form');
    console.log(data);
 });

The result on console

尝试解决方案 3：

 var data =JSON.stringify(jQuery('#hetfo_form').serializeArray());

控制台结果： [{"name":"'A[]'","value":"2"},{"name":"'A[]'","value":"10"},{"name": "'A[]'","value":"40"},{"name":"'A[]'","value":""},{"name":"'B[]'" ,"value":"4"},{"name":"'B[]'","value":"8"},{"name":"'B[]'","value":" "},{"name":"'B[]'","value":""},{"name":"'C[]'","value":"64"},{"name" :"'C[]'","value":"26"},{"name":"'C[]'","value":""},{"name":"'C[]' ","值":""}]

我做错了什么？获取请求的 json 结果的正确 html 和 jquery 代码是什么？我不想刷新整个页面，只想获取请求的结果并使用 console.log() 显示它。谢谢

【问题讨论】：

到目前为止你做了什么？你的代码呢？

标签： php jquery html arrays json

【解决方案1】：

json_string = $('your_form').serialize();

您可以在这里找到更多信息 - jquery documentation

【讨论】：

【解决方案2】：

你可以试试：

1) 关于数组键：如果需要，可以用 PHP (for,foreach) 生成数组的键，因为 javascript 不会以这种方式生成整数键（对于 PHP，它们默认从PHP 命名约定）：

$fields = 3;

for($n=0; $n<$fields; $n++)
{
   echo '<select class="form-control" name="A['.$n.']">';
   echo '</select>';
}

2) 与表单控件同名的情况下用javascript处理数据：

var myForm = document.forms.hetfo_form;
var myData_a = myForm.elements['A[]'];
for (var i = 0; i < myData_a .length; i++) {
    var aData = myData_a [i];
}

【讨论】：