Question

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

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

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没有检测到我的输入是具有相同名称的复选框。

Answer 1

您为所有复选框添加相同的名称，表单不作为数组，您必须在名称中指定它，请参阅代码段

＆＃13;

$(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
        }
    });
  });
});

＆＃13;

<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>

＆＃13;

Answer 2

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

Jquery form.serialize（）不能正确管理复选框

2 个答案: