javascript - jQuery 获取表单参数数组并在 Ajax 请求中提交

Question

在提交表单时，我希望附加来自不同表单的数据，并通过 ajax 请求提交该数据和原始表单数据。

我希望获得的表单字段采用以下格式:

<input type="hidden" name="selected[84334][]" value="865804">
<input type="hidden" name="selected[54434][]" value="865807">
<input type="hidden" name="selected[54494][]" value="865808">
<input type="hidden" name="selected[54494][]" value="866212">

我当前的ajax请求是:

var form_data = $(this).serializeArray();
var more_data = $('input[name="data[]"]', '.fields_container_class').serializeArray();
var data = $.merge( form_data, more_data );

$.ajax({
  url: $(this).attr('action'),
  type: $(this).attr('method'),
  data: $.param(data)
});

我已经能够捕获名为“data[]”的隐藏字段中的数据，但是如何捕获并包含“selected[][]”字段，同时保留键？

感谢您的帮助

斯科特

Answer 1

要选择selected[X][]字段，您可以使用“属性开头为”选择器，如下所示:

$('form').on('submit', function(e) {
  e.preventDefault();
  var form_data = $(this).serializeArray();
  var more_data = $('input[name="data[]"]', '.fields_container_class').serializeArray();
  var even_more_data = $('input[name^="selected"]', '.fields_container_class').serializeArray();
  
  var data = form_data.concat(more_data, even_more_data);
  console.log(data);
  
  // AJAX call...
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fields_container_class">
  <input type="hidden" name="data[]" value="lorem">
  <input type="hidden" name="data[]" value="ipsum">
  
  <input type="hidden" name="selected[84334][]" value="865804">
  <input type="hidden" name="selected[54434][]" value="865807">
  <input type="hidden" name="selected[54494][]" value="865808">
  <input type="hidden" name="selected[54494][]" value="866212">

  <form>
    <input type="text" name="foo" value="foobar" />
    <button>Submit</button>
  </form>
</div>

注意这里使用的是concat()，而不是jQuery的$.merge()。这是因为前者允许您在一次调用中连接多个数组，而后者则不允许。

最后，为了简化逻辑，您可以使用扩展运算符 ... 在声明点合并数组。但请注意，IE 不支持此功能。

var data = [
  ...$(this).serializeArray(),
  ...$('input[name="data[]"]', '.fields_container_class').serializeArray(),
  ...$('input[name^="selected"]', '.fields_container_class').serializeArray()
]