jQuery
Ajax

Syntax

• var jqXHR = $ .ajax (URL [, Einstellungen])
• var jqXHR = $ .ajax ([Einstellungen])
• jqXHR.done (Funktion (data, textStatus, jqXHR) {});
• jqXHR.fail (Funktion (jqXHR, textStatus, errorThrown) {});
• jqXHR.always (Funktion (jqXHR) {});

Parameter

Bemerkungen

Behandlung von HTTP-Antwortcodes mit $ .ajax ()

Zusätzlich zu .done , .fail und .always versprechen Callbacks, die .done , ob die Anforderung erfolgreich war oder nicht, ausgelöst werden, die Option, eine Funktion auszulösen, wenn ein bestimmter HTTP-Statuscode vom Server zurückgegeben wird. Dies kann mit dem Parameter statusCode .

$.ajax({
    type: {POST or GET or PUT etc.},
    url:  {server.url},
    data: {someData: true},
    statusCode: {
        404: function(responseObject, textStatus, jqXHR) {
            // No content found (404)
            // This code will be executed if the server returns a 404 response
        },
        503: function(responseObject, textStatus, errorThrown) {
            // Service Unavailable (503)
            // This code will be executed if the server returns a 503 response
        }           
    }
})
.done(function(data){
    alert(data);
})
.fail(function(jqXHR, textStatus){
    alert('Something went wrong: ' + textStatus);
})
.always(function(jqXHR, textStatus) {
   alert('Ajax request was finished')
});

In der offiziellen jQuery-Dokumentation heißt es:

Wenn die Anforderung erfolgreich ist, übernehmen die Statuscodefunktionen dieselben Parameter wie der Erfolgsrückruf. Wenn dies zu einem Fehler führt (einschließlich 3xx-Weiterleitung), übernehmen sie dieselben Parameter wie der error Callback.

Ajax zum Senden eines Formulars verwenden

Manchmal haben Sie möglicherweise ein Formular und möchten es mit ajax absenden.

Angenommen, Sie haben diese einfache Form -

<form id="ajax_form" action="form_action.php">
  <label for="name">Name :</label>
  <input name="name" id="name" type="text" />
  <label for="name">Email :</label>
  <input name="email" id="email" type="text" />
  <input type="submit" value="Submit" />
</form>

Der folgende jQuery-Code kann verwendet werden (innerhalb eines $(document).ready Aufrufs):

$('#ajax_form').submit(function(event){
  event.preventDefault();
  var $form = $(this);

  $.ajax({
      type: 'POST',
      url: $form.attr('action'),
      data: $form.serialize(),
      success: function(data) {
        // Do something with the response
      },
      error: function(error) {
        // Do something with the error
      }
  });
});

Erläuterung

• var $form = $(this) - das Formular, das zur Wiederverwendung zwischengespeichert wird
• $('#ajax_form').submit(function(event){ - Wenn das Formular mit der ID "ajax_form" gesendet wird, führen Sie diese Funktion aus und übergeben Sie das Ereignis als Parameter.
• event.preventDefault(); - Verhindern Sie, dass das Formular normal übermittelt wird (Alternativ können Sie nach der ajax({}); Anweisung ajax({}); return false , was die gleiche Wirkung hat).
• url: $form.attr('action'), - url: $form.attr('action'), den Wert des "action" -Attributs des Formulars ab und verwendet ihn für die "url" -Eigenschaft.
• data: $form.serialize(), - Konvertiert die Eingaben innerhalb des Formulars in eine Zeichenfolge, die zum Senden an den Server geeignet ist. In diesem Fall wird etwas wie "name=Bob&[email protected]" zurückgegeben.

Senden von JSON-Daten

Mit jQuery ist die Handhabung von JSON- Antworten problemlos. Es ist jedoch etwas mehr Arbeit erforderlich, wenn eine bestimmte Anforderung das Senden von Daten im JSON-Format erfordert:

 $.ajax("/json-consuming-route", {
      data: JSON.stringify({author: {name: "Bullwinkle J. Moose", 
                                     email: "[email protected]"} }),
      method: "POST",
      contentType: "application/json"
   });

Beachten Sie, dass wir den korrekten contentType für die Daten contentType die wir senden. Dies ist im Allgemeinen eine bewährte Methode, die möglicherweise von der API verlangt wird, für die Sie eine Veröffentlichung durchführen. Dies hat jedoch auch den Nebeneffekt, dass jQuery angewiesen wird, die Standardkonvertierung von %20 in + nicht durchzuführen, was bei einem contentType wäre auf dem Standardwert von application/x-www-form-urlencoded . Wenn Sie aus irgendeinem Grund contentType auf den Standardwert setzen müssen, stellen Sie sicher, dass processData auf false gesetzt ist, um dies zu verhindern.

Der Aufruf von JSON.stringify könnte hier vermieden werden, aber durch die Verwendung von JSON.stringify können die Daten in Form eines JavaScript-Objekts JSON.stringify werden (um peinliche JSON-Syntaxfehler zu vermeiden, z. B. das Angeben von Eigenschaftennamen).

Alles in einem Beispielen

Ajax Get:

Lösung 1:

$.get('url.html', function(data){
    $('#update-box').html(data);
});

Lösung 2:

 $.ajax({
     type: 'GET',
     url: 'url.php',  
 }).done(function(data){
     $('#update-box').html(data);
 }).fail(function(jqXHR, textStatus){
     alert('Error occured: ' + textStatus);
 });

Ajax Load: Eine weitere Ajax- Get-Methode, die zur Vereinfachung erstellt wurde

$('#update-box').load('url.html');

.load kann auch mit zusätzlichen Daten aufgerufen werden. Der Datenteil kann als String oder Objekt bereitgestellt werden.

$('#update-box').load('url.php', {data: "something"});
$('#update-box').load('url.php', "data=something");

Wenn .load mit einer Callback-Methode aufgerufen wird, wird die Anforderung an den Server als Post ausgegeben

$('#update-box').load('url.php', {data: "something"}, function(resolve){
    //do something
});

Ajax Post:

Lösung 1:

$.post('url.php', 
    {date1Name: data1Value, date2Name: data2Value},  //data to be posted
    function(data){
        $('#update-box').html(data);
    }
);

Lösung 2:

$.ajax({
    type: 'Post',
    url: 'url.php',  
    data: {date1Name: data1Value, date2Name: data2Value}  //data to be posted
}).done(function(data){
    $('#update-box').html(data);
}).fail(function(jqXHR, textStatus){
    alert('Error occured: ' + textStatus);
});

Ajax Post JSON:

var postData = {
    Name: name,
    Address: address,
    Phone: phone
};

$.ajax({
     type: "POST",
     url: "url.php",
     dataType: "json",
     data: JSON.stringfy(postData),
     success: function (data) {
         //here variable data is in JSON format
     }
 });

Ajax Get JSON:

Lösung 1:

$.getJSON('url.php', function(data){
    //here variable data is in JSON format
});

Lösung 2:

 $.ajax({
      type: "Get",
      url: "url.php",
      dataType: "json",
      data: JSON.stringfy(postData),
      success: function (data) {
          //here variable data is in JSON format
      },    
      error: function(jqXHR, textStatus){
          alert('Error occured: ' + textStatus);
      }
  });

Ajax Abbruch eines Anrufs oder einer Anfrage

var xhr = $.ajax({
    type: "POST",
    url: "some.php",
    data: "name=John&location=Boston",
    success: function(msg){
       alert( "Data Saved: " + msg );
    }
});

// töte die Anfrage

xhr.abort()

Ajax-Datei-Uploads

1. Ein einfaches vollständiges Beispiel

Wir können diesen Beispielcode verwenden, um die vom Benutzer ausgewählten Dateien jedes Mal hochzuladen, wenn eine neue Dateiauswahl getroffen wird.

<input type="file" id="file-input" multiple>

var files;
var fdata = new FormData();
$("#file-input").on("change", function (e) {
    files = this.files;

    $.each(files, function (i, file) {
        fdata.append("file" + i, file);
    });

    fdata.append("FullName", "John Doe");
    fdata.append("Gender", "Male");
    fdata.append("Age", "24");

    $.ajax({
        url: "/Test/Url",
        type: "post",
        data: fdata, //add the FormData object to the data parameter
        processData: false, //tell jquery not to process data
        contentType: false, //tell jquery not to set content-type
        success: function (response, status, jqxhr) {
            //handle success
        },
        error: function (jqxhr, status, errorMessage) {
            //handle error
        }
    });
});

Lassen Sie uns das nun aufschlüsseln und Teil für Teil untersuchen.

2. Arbeiten mit Dateieingaben

Dieses MDN-Dokument (Verwenden von Dateien aus Webanwendungen) enthält Informationen zu verschiedenen Methoden zum Umgang mit Dateieingaben. Einige dieser Methoden werden auch in diesem Beispiel verwendet.

Bevor wir Dateien hochladen können, müssen wir dem Benutzer zunächst die Möglichkeit geben, die Dateien auszuwählen, die er hochladen möchte. Zu diesem Zweck verwenden wir eine file input . Die multiple Eigenschaft ermöglicht das Auswählen mehrerer Dateien. Sie können sie entfernen, wenn Sie möchten, dass der Benutzer jeweils eine Datei auswählt.

<input type="file" id="file-input" multiple>

Wir werden das change event von input verwenden, um die Dateien zu erfassen.

var files;
$("#file-input").on("change", function(e){
    files = this.files;
});

Innerhalb der Handlerfunktion greifen wir über die Eigenschaft files unserer Eingabe auf die Dateien zu. Dies gibt uns eine FileList , ein Array-ähnliches Objekt.

3. Erstellen und Füllen der FormData

Um Dateien mit Ajax hochzuladen, verwenden wir FormData .

var fdata = new FormData();

Die Dateiliste, die wir im vorherigen Schritt erhalten haben, ist ein Array-ähnliches Objekt, das mit verschiedenen Methoden einschließlich für Schleife , für ... der Schleife und jQuery.each wiederholt werden kann . In diesem Beispiel bleiben wir bei der jQuery.

$.each(files, function(i, file) {
  //...
});

Wir werden die Append-Methode von FormData verwenden, um die Dateien unserem formdata-Objekt hinzuzufügen.

$.each(files, function(i, file) {
  fdata.append("file" + i, file);
});

Wir können auch andere Daten hinzufügen, die wir auf dieselbe Weise senden möchten. Angenommen, wir möchten einige persönliche Informationen, die wir vom Benutzer erhalten haben, zusammen mit den Dateien senden. Wir könnten diese Informationen in unser formdata-Objekt einfügen.

fdata.append("FullName", "John Doe");
fdata.append("Gender", "Male");
fdata.append("Age", "24");
//...

4. Senden der Dateien mit Ajax

$.ajax({
    url: "/Test/Url",
    type: "post",
    data: fdata, //add the FormData object to the data parameter
    processData: false, //tell jquery not to process data
    contentType: false, //tell jquery not to set content-type
    success: function (response, status, jqxhr) {
        //handle success
    },
    error: function (jqxhr, status, errorMessage) {
        //handle error
    }
});

Die Eigenschaften von processData und contentType setzen wir auf false . Dies geschieht, damit die Dateien an den Server gesendet und vom Server korrekt verarbeitet werden können.