Ajax Form Submit-Beispiele mit jQuery

Blog

Ajax Form Submit-Beispiele mit jQuery

Ajax Form Submit-Beispiele mit jQuery

Überblick

In diesem jQuery-Ajax sendet ein mehrteiliges Formular oder ein FormData-Tutorial-Beispiel – Sie erfahren, wie Sie das Formular mit dem jquery-ajax mit mehrteiligen Daten oder FromData senden. Hier erfahren Sie mehr über die grundlegenden FAQs von jquery ajax form.

In diesem Tutorial lernen Sie Schritt für Schritt, wie Jquery Ajax-Formulare mit den Formulardaten übermittelt. Ein einfaches jQuery-Ajax-Beispiel, das Ihnen zeigt, wie Sie ein mehrteiliges Formular mit Javascript senden |_+_| und |_+_|.

Wenn Sie Ajax Form Submit von jQuery verwenden, können Sie die Formulardaten an den Server senden, ohne die gesamte Seite neu zu laden. Dadurch werden Teile einer Webseite aktualisiert – ohne die gesamte Seite neu zu laden.

AJAX: AJAX (asynchronous JavaScript and XML) ist die Kunst, Daten mit einem Server auszutauschen und Teile einer Webseite zu aktualisieren – ohne die gesamte Seite neu zu laden.

Inhaltsverzeichnis

  • HTML-Formular erstellen
  • jQuery Ajax-Code

Häufig gestellte Fragen

  • Wie füge ich zusätzliche Felder oder Daten mit Formulardaten in jQuery Ajax hinzu?
  • ajax FormData: Illegaler Aufruf
  • Wie sende ich Multipart/FormData oder Dateien mit jQuery.ajax?

HTML-Formular erstellen

In diesem Schritt erstellen wir ein HTML-Formular für mehrere Datei-Uploads oder FormData und ein zusätzliches Feld.

FormData

jQuery Ajax-Code

In diesem Schritt schreiben wir Jquery-Ajax-Code zum Senden von Formulardaten an den Server.

$.ajax()

FAQs – jQuery Ajax Formular senden

1. Wie füge ich zusätzliche Felder mit Formulardaten in jQuery Ajax hinzu?

Die |_+_| Methode der jQuery Ajax Form Submit with FormData Example Schnittstelle fügt einen neuen Wert an einen vorhandenen Schlüssel in einem |_+_| . an -Objekt oder fügt den Schlüssel hinzu, falls er noch nicht vorhanden ist.

$(document).ready(function () { $('#btnSubmit').click(function (event) { //stop submit the form, we will post it manually. event.preventDefault(); // Get form var form = $('#fileUploadForm')[0]; // Create an FormData object var data = new FormData(form); // If you want to add an extra field for the FormData data.append('CustomField', 'This is some extra data, testing'); // disabled the submit button $('#btnSubmit').prop('disabled', true); $.ajax({ type: 'POST', enctype: 'multipart/form-data', url: '/upload.php', data: data, processData: false, contentType: false, cache: false, timeout: 800000, success: function (data) { $('#output').text(data); console.log('SUCCESS : ', data); $('#btnSubmit').prop('disabled', false); }, error: function (e) { $('#output').text(e.responseText); console.log('ERROR : ', e); $('#btnSubmit').prop('disabled', false); } }); }); });

2. ajax FormData: Illegaler Aufruf

jQuery versucht, Ihr FormData-Objekt in einen String umzuwandeln, fügen Sie dies Ihrem $.ajax-Aufruf hinzu:

**append()**

3. Wie sende ich Multipart/FormData oder Dateien mit jQuery.ajax?

In diesem Schritt erfahren Sie, wie Sie mehrere Dateien mit jQuery Ajax senden. Sehen wir uns das folgende Code-Snippet an:

FormData

Notiz

Das ist der Bildtitel

Abschluss

In diesem Jquery-Ajax-Formular-Tutorial haben Sie gelernt, wie Sie die Formulardaten oder das mehrteilige Formular mit dem Jquery-Ajax auf dem Server senden oder senden. Außerdem kennen Sie die zugehörigen Abfragen von jquery ajax form.

#javascript #jquery #ajax