jQuery
Ajax

Syntaxe

• var jqXHR = $ .ajax (URL [, paramètres])
• var jqXHR = $ .ajax ([paramètres])
• jqXHR.done (function (data, textStatus, jqXHR) {});
• jqXHR.fail (fonction (jqXHR, textStatus, errorThrown) {});
• jqXHR.always (function (jqXHR) {});

Paramètres

Remarques

Gestion des codes de réponse HTTP avec $ .ajax ()

Outre les .done , .fail et .always , qui sont déclenchés selon que la requête a réussi ou non, il est possible de déclencher une fonction lorsqu'un code d'état HTTP spécifique est renvoyé par le serveur. Cela peut être fait en utilisant le paramètre 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')
});

Comme indiqué dans la documentation officielle de jQuery:

Si la requête réussit, les fonctions de code d'état prennent les mêmes paramètres que le rappel de succès; si cela entraîne une erreur (y compris la redirection 3xx), ils prennent les mêmes paramètres que le rappel d' error .

Utiliser Ajax pour soumettre un formulaire

Parfois, vous pouvez avoir un formulaire et le soumettre en utilisant ajax.

Supposons que vous ayez cette forme simple -

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

Le code jQuery suivant peut être utilisé (dans un appel à $(document).ready ) -

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

Explication

• var $form = $(this) - le formulaire, mis en cache pour être réutilisé
• $('#ajax_form').submit(function(event){ - Lorsque le formulaire avec l'ID "ajax_form" est soumis, exécutez cette fonction et passez l'événement en tant que paramètre.
• event.preventDefault(); - Empêcher le formulaire de se soumettre normalement (nous pouvons aussi utiliser return false après la commande ajax({}); qui aura le même effet)
• url: $form.attr('action'), - Récupère la valeur de l'attribut "action" du formulaire et l'utilise pour la propriété "url".
• data: $form.serialize(), - Convertit les entrées du formulaire en une chaîne adaptée à l'envoi au serveur. Dans ce cas, il renverra quelque chose comme "name=Bob&[email protected]"

Envoi de données JSON

jQuery facilite la gestion des réponses JSON, mais un peu plus de travail est nécessaire lorsqu'une requête donnée souhaite que vous envoyiez des données au format JSON:

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

Notez que nous spécifions le contentType correct pour les données que nous envoyons. C'est une bonne pratique en général et peut être requise par l'API sur laquelle vous publiez - mais cela a aussi pour effet secondaire de demander à jQuery de ne pas effectuer la conversion par défaut de %20 à + , ce qui serait le cas si contentType était laissé à la valeur par défaut de l' application/x-www-form-urlencoded . Si pour une raison quelconque vous devez laisser contentType défini sur la valeur par défaut, veillez à définir processData sur false pour éviter cela.

L'appel à JSON.stringify pourrait être évité ici, mais son utilisation nous permet de fournir les données sous la forme d'un objet JavaScript (évitant ainsi les erreurs de syntaxe JSON embarrassantes telles que l'impossibilité de citer les noms de propriété).

Tous dans un exemple

Ajax Obtenir:

Solution 1:

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

Solution 2:

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

Ajax Load: Une autre méthode ajax get créée pour simplifier

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

.load peut également être appelé avec des données supplémentaires. La partie de données peut être fournie sous forme de chaîne ou d'objet.

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

Si .load est appelé avec une méthode de rappel, la demande au serveur sera une publication

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

Ajax Post:

Solution 1:

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

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

Solution 1:

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

Solution 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 Annuler un appel ou une demande

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

// tue la requête

xhr.abort()

Ajax File Uploads

1. Un exemple simple et complet

Nous pourrions utiliser cet exemple de code pour télécharger les fichiers sélectionnés par l'utilisateur chaque fois qu'une nouvelle sélection de fichier est effectuée.

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

Maintenant, décomposons cela et inspectons-le une par une.

2. Travailler avec des entrées de fichier

Ce document MDN (Utilisation de fichiers provenant d’applications Web) est une bonne lecture sur les différentes méthodes de gestion des entrées de fichiers. Certaines de ces méthodes seront également utilisées dans cet exemple.

Avant de télécharger des fichiers, nous devons d’abord donner à l’utilisateur un moyen de sélectionner les fichiers qu’ils souhaitent télécharger. Pour cela, nous utiliserons une file input . La propriété multiple permet de sélectionner plusieurs fichiers, vous pouvez la supprimer si vous souhaitez que l’utilisateur sélectionne un fichier à la fois.

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

Nous utiliserons l' change event l'entrée pour capturer les fichiers.

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

À l'intérieur de la fonction de gestionnaire, nous accédons aux fichiers via la propriété files de notre entrée. Cela nous donne une FileList , qui est un objet de type tableau.

3. Créer et remplir les FormData

Afin de télécharger des fichiers avec Ajax, nous allons utiliser FormData .

var fdata = new FormData();

FileList que nous avons obtenu à l’étape précédente est un objet de type tableau et peut être itéré à l’aide de diverses méthodes, notamment pour loop , for ... of loop et jQuery.each . Nous allons rester avec le jQuery dans cet exemple.

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

Nous allons utiliser la méthode append de FormData pour ajouter les fichiers dans notre objet formdata.

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

Nous pouvons également ajouter d'autres données que nous voulons envoyer de la même manière. Disons que nous voulons envoyer des informations personnelles que nous avons reçues de l'utilisateur avec les fichiers. Nous pourrions ajouter cette information dans notre objet formdata.

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

4. Envoi des fichiers avec 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
    }
});

Nous définissons les propriétés processData et contentType sur false . Ceci est fait pour que les fichiers puissent être envoyés au serveur et traités par le serveur correctement.