如何在 JQuery AJAX 请求中同时传输 FormData 和字符串数据？

如何通过 JQuery AJAX 发送 FormData 和字符串数据？

使用同时包含文件输入和隐藏输入字段的表单时，您可能会遇到发送两者的困难使用 FormData() 将数据集组合在一起。本文提供了解决此问题的方法。

在 FormData 中，可以使用 fd.append("file", file_data) 方法追加文件数据。但是，要将隐藏的输入数据与文件一起包含，您需要使用以下步骤：

1. 使用 $('form').serializeArray() 获取代表每个对象的对象数组输入字段及其值。
2. 迭代数组并使用 fd.append(input.name,input.value) 将每个字段的名称和值附加到 FormData 对象。

例如，考虑 HTML 代码：

<code class="html"><form action="image.php" method="post" enctype="multipart/form-data">
  <input type="file" name="file[]" multiple="">
  <input type="hidden" name="page_id" value="<?php echo $page_id; ?>"/>
  <input type="hidden" name="category_id" value="<?php echo $item_category->category_id; ?>"/>
  <input type="hidden" name="method" value="upload"/>
  <input type="hidden" name="required[category_id]" value="Category ID"/>
</form></code>

以及以下 JQuery/Ajax 代码：

<code class="javascript">var fd = new FormData();
var file_data = $('input[type="file"]')[0].files; // for multiple files
for (var i = 0; i < file_data.length; i++) {
  fd.append("file_" + i, file_data[i]);
}
var other_data = $('form').serializeArray();
$.each(other_data, function (key, input) {
  fd.append(input.name, input.value);
});
$.ajax({
  url: 'test.php',
  data: fd,
  contentType: false,
  processData: false,
  type: 'POST',
  success: function (data) {
    console.log(data);
  },
});</code>

此代码首先从输入获取文件并将它们附加到 FormData 对象。然后，它使用serializeArray()从隐藏的输入字段获取值，并将它们附加到FormData对象。最后，使用 Ajax 请求将数据发送到服务器。

按照以下步骤，您可以成功通过 JQuery AJAX 将 FormData 和字符串数据一起发送，确保所有必要的数据都随请求传输。

以上是如何在 JQuery AJAX 请求中同时传输 FormData 和字符串数据？的详细内容。更多信息请关注PHP中文网其他相关文章！