JQuery AJAX リクエストで FormData と String データの両方を送信するにはどうすればよいですか?

JQuery AJAX 経由で FormData と String データの両方を送信する方法?

ファイル入力と非表示の入力フィールドの両方を含むフォームを操作する場合、両方の送信で問題が発生する可能性があります。 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 と String データの両方を送信するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。