Wie übertrage ich sowohl FormData- als auch String-Daten in einer JQuery-AJAX-Anfrage?

Wie sende ich sowohl FormData- als auch String-Daten über JQuery AJAX?

Wenn Sie mit Formularen arbeiten, die sowohl Dateieingaben als auch versteckte Eingabefelder enthalten, können beim Senden beider Felder Schwierigkeiten auftreten Datensätze mithilfe von FormData() zusammenfügen. Dieser Artikel bietet eine Lösung für dieses Problem.

In FormData können Sie Dateidaten mit der Methode fd.append("file", file_data) anhängen. Um jedoch versteckte Eingabedaten zusammen mit der Datei einzubinden, müssen Sie die folgenden Schritte ausführen:

1. Verwenden Sie $('form').serializeArray(), um ein Array von Objekten zu erhalten, die jedes Objekt darstellen Eingabefeld und seinen Wert.
2. Durchlaufen Sie das Array und hängen Sie den Namen und Wert jedes Felds an das FormData-Objekt an, indem Sie fd.append(input.name,input.value) verwenden.

Betrachten Sie zum Beispiel den HTML-Code:

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

Und den folgenden JQuery/Ajax-Code:

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

Dieser Code ruft zunächst die Dateien aus der Eingabe ab und hängt sie an das FormData-Objekt an . Anschließend ruft es mithilfe von serializeArray() die Werte aus den ausgeblendeten Eingabefeldern ab und hängt sie ebenfalls an das FormData-Objekt an. Abschließend werden die Daten mithilfe einer Ajax-Anfrage an den Server gesendet.

Wenn Sie diese Schritte befolgen, können Sie FormData- und String-Daten erfolgreich zusammen über JQuery AJAX senden und so sicherstellen, dass alle erforderlichen Daten mit der Anfrage übertragen werden.

Das obige ist der detaillierte Inhalt vonWie übertrage ich sowohl FormData- als auch String-Daten in einer JQuery-AJAX-Anfrage?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!