jQuery
Ajax

Syntaxis

• var jqXHR = $ .ajax (url [, instellingen])
• var jqXHR = $ .ajax ([instellingen])
• jqXHR.done (functie (data, textStatus, jqXHR) {});
• jqXHR.fail (functie (jqXHR, textStatus, errorThrown) {});
• jqXHR.always (function (jqXHR) {});

parameters

Opmerkingen

HTTP-responscodes verwerken met $ .ajax ()

Naast .done , .fail en .always beloven callbacks, die worden geactiveerd op basis van de vraag of de aanvraag wel of niet succesvol was, is er de mogelijkheid om een functie te activeren wanneer een bepaalde HTTP status code wordt geretourneerd door de server. Dit kan worden gedaan met behulp van de 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')
});

Zoals de officiële documentatie van jQuery aangeeft:

Als het verzoek succesvol is, nemen de statuscodefuncties dezelfde parameters aan als de succesvolle callback; als daardoor een fout (inclusief 3xx redirect), nemen zij dezelfde parameters als de error callback.

Ajax gebruiken om een formulier in te dienen

Soms heeft u een formulier en wilt u dit verzenden met ajax.

Stel dat u deze eenvoudige vorm heeft -

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

De volgende jQuery-code kan worden gebruikt (binnen een $(document).ready aanroep) -

$('#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
      }
  });
});

Uitleg

• var $form = $(this) - het formulier, opgeslagen voor hergebruik
• $('#ajax_form').submit(function(event){ - Als het formulier met ID "ajax_form" is verzonden, voert u deze functie uit en geeft u de gebeurtenis door als parameter.
• event.preventDefault(); - Voorkom dat het formulier normaal wordt verzonden (als alternatief kunnen we return false na de ajax({}); verklaring, die hetzelfde effect zal hebben)
• url: $form.attr('action'), - Haal de waarde op van het kenmerk "action" van het formulier en gebruik dit voor de eigenschap "url".
• data: $form.serialize(), - Converteert de invoer in het formulier naar een string die geschikt is voor verzending naar de server. In dit geval retourneert het zoiets als "name=Bob&[email protected]"

JSON-gegevens verzenden

jQuery maakt het afhandelen van jSON- reacties moeiteloos, maar er is iets meer werk vereist wanneer een bepaald verzoek u gegevens in JSON-formaat wenst te sturen :

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

Merk op dat we het juiste contentType opgeven voor de gegevens die we verzenden; dit is in het algemeen een goede praktijk en kan worden vereist door de API waarnaar u post - maar het heeft ook het neveneffect dat jQuery wordt opgedragen de standaardconversie van %20 naar + niet uit te voeren, wat het zou doen als contentType was links op de standaardwaarde van application/x-www-form-urlencoded . Als u om een of andere reden contentType op de standaardwaarde moet laten staan, moet u processData op false instellen om dit te voorkomen.

De aanroep naar JSON.stringify kan hier worden vermeden, maar door het te gebruiken, kunnen we de gegevens in de vorm van een JavaScript-object leveren (waardoor gênante JSON-syntaxisfouten worden voorkomen, zoals het niet vermelden van eigenschapsnamen).

Alles in één voorbeelden

Ajax krijgt:

Oplossing 1:

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

Oplossing 2:

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

Ajax Load: Nog een Ajax-methode voor eenvoud gemaakt

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

.load kan ook worden opgeroepen met extra gegevens. Het gegevensgedeelte kan worden geleverd als tekenreeks of object.

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

Als .load wordt aangeroepen met een callback-methode, is het verzoek aan de server een bericht

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

Ajax bericht:

Oplossing 1:

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

Oplossing 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 bericht 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 krijgt JSON:

Oplossing 1:

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

Oplossing 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 beëindigt een oproep of verzoek

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

// dood het verzoek

xhr.abort()

Ajax-bestandsuploads

1. Een eenvoudig compleet voorbeeld

We kunnen deze voorbeeldcode gebruiken om de door de gebruiker geselecteerde bestanden te uploaden telkens wanneer een nieuwe bestandsselectie wordt gemaakt.

<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
        }
    });
});

Laten we dit nu afbreken en deel voor deel inspecteren.

2. Werken met bestandsinvoer

Dit MDN-document (Bestanden uit webapplicaties gebruiken) is een goed artikel over verschillende methoden voor het omgaan met bestandsinvoer. Sommige van deze methoden worden ook in dit voorbeeld gebruikt.

Voordat we bestanden gaan uploaden, moeten we de gebruiker eerst een manier geven om de bestanden te selecteren die hij wil uploaden. Voor dit doel zullen we een file input . Met de eigenschap multiple kunt u meerdere bestanden selecteren, u kunt deze verwijderen als u wilt dat de gebruiker één bestand tegelijk selecteert.

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

We zullen de change event van input gebruiken om de bestanden vast te leggen.

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

Binnen de handler-functie hebben we toegang tot de bestanden via de eigenschap files van onze invoer. Dit geeft ons een FileList , wat een array-achtig object is.

3. Maken en invullen van de FormData

Om bestanden met Ajax te uploaden gaan we FormData gebruiken .

var fdata = new FormData();

Bestandslijst die we in de vorige stap hebben verkregen, is een arrayachtig object en kan worden herhaald met behulp van verschillende methoden, waaronder voor loop , voor ... van loop en jQuery.each . In dit voorbeeld blijven we bij de jQuery.

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

We zullen de append-methode van FormData gebruiken om de bestanden toe te voegen aan ons formdata-object.

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

We kunnen ook andere gegevens toevoegen die we op dezelfde manier willen verzenden. Laten we zeggen dat we wat persoonlijke informatie die we van de gebruiker hebben ontvangen, samen met de bestanden willen verzenden. We kunnen deze informatie toevoegen aan ons formuliergegevensobject.

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

4. Verzenden van de bestanden met 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
    }
});

We stellen de eigenschappen processData en contentType op false . Dit wordt gedaan zodat de bestanden naar de server kunnen worden verzonden en door de server correct kunnen worden verwerkt.