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 중국어 웹사이트의 기타 관련 기사를 참조하세요!