Jquery form.serialize() 不能正确管理复选框

Posted 2023-05-09

【中文标题】Jquery form.serialize() 不能正确管理复选框

【英文标题】：Jquery form.serialize() do not manage checkboxes properly

【发布时间】：2018-03-03 21:25:52

【问题描述】：

我在使用 Jquery 提交 ajax 表单时遇到问题。

Ajax 调用工作正常，但我的服务器只收到请求数据中最后一个选中的复选框。发生这种情况是因为serialize 函数生成的formdata（并传递给我的请求标头）的格式如下

configuration[accessoires]:2
configuration[accessoires]:3

而不是

configuration[accessoires][0]:2
configuration[accessoires][1]:3

这是我的代码：

$(document).ready(function () 
  $('body').on('submit', 'form[name="configuration"]', function (e) 
    e.preventDefault();
    var $form = $('form[name="configuration"]');
    var formData = $form.serialize(); // same result with $(this).serialize() or serializeArray()
    $.ajax(
        url : $form.attr('action'),
        type: $form.attr('method'),
        data : formData,
        success: function(html) 
          // success code
        
    );
  );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="configuration" action="blabla" method="POST">
  <input id="accessoire1" name="configuration[accessoires]" value="1" type="checkbox">
  <label for="accessoire1">blabla 1</label>
  
  <input id="accessoire2" name="configuration[accessoires]" value="2" type="checkbox">
  <label for="accessoire2">blabla 2</label>
  
  <input id="accessoire3" name="configuration[accessoires]" value="3" type="checkbox">
  <label for="accessoire3">blabla 3</label>
  
  <button id="app_submit">
    <span>submit</span>
  </button>
</form>

我可能遗漏了一些东西，但 jquery 似乎没有检测到我的输入是同名的复选框。

【问题讨论】：

你应该像这样使用configuration[accessoires][0],configuration[accessoires][1]，

【参考方案1】：

您为所有复选框添加相同的名称，表单不作为数组您必须在名称本身中指定它，请参阅 sn-p

$(document).ready(function () 
  $('body').on('submit', 'form[name="configuration"]', function (e) 
    e.preventDefault();
    var $form = $('form[name="configuration"]');
    var formData = $(this).serialize();
    console.log(formData);
    $.ajax(
        url : $form.attr('action'),
        type: $form.attr('method'),
        data : formData,
        success: function(html) 
          // success code
        
    );
  );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="configuration" action="blabla" method="POST">
  <input id="accessoire1" name="configuration[accessoires][0]" value="1" type="checkbox">
  <label for="accessoire1">blabla 1</label>
  
  <input id="accessoire2" name="configuration[accessoires][1]" value="2" type="checkbox">
  <label for="accessoire2">blabla 2</label>
  
  <input id="accessoire3" name="configuration[accessoires][2]" value="3" type="checkbox">
  <label for="accessoire3">blabla 3</label>
  
  <button id="app_submit">
    <span>submit</span>
  </button>
</form>

【讨论】：

我认为序列化程序能够自行处理。但是通过重新阅读doc，我明白了这一点。生成的查询字符串对所有检查过的同名输入采用相同的索引。谢谢！

【参考方案2】：

您可以使用 .serializeArray() 函数。它将创建 javascript 对象数组。

【讨论】：

我在我的 sn-p 中准确地说是一样的。 ;)