Requête AJAX POST dans jQuery

L’article d’aujourd’hui traitera des requêtes AJAX POST dans jQuery.

Requête AJAX POST dans jQuery

La requête AJAX POST de jQuery effectue une requête HTTP asynchrone (AJAX).

Syntaxe:

jQuery.ajax(url[, settings])
jQuery.ajax([settings])

1. URL est la chaîne contenant l’URL à laquelle la demande sera envoyée.
2. settings sont les objets paire clé/valeur qui configurent la requête AJAX. Tous les paramètres sont facultatifs. Une valeur par défaut peut être définie pour chaque option avec $.ajaxSetup().

La fonction $.ajax() sous-tend toutes les requêtes AJAX envoyées via jQuery. Il est souvent inutile d’appeler cette caractéristique d’un coup, car de nombreuses options de plus haut niveau comme $.Get() et .load() sont disponibles et plus simples à appliquer.

Des options courantes sont requises si elles sont beaucoup moins nombreuses, bien que $.ajax() puisse être utilisé de manière plus flexible.

L’objet jQuery XMLHttpRequest (jqXHR) renvoyé via $.ajax() depuis jQuery 1.5 est un sur-ensemble de l’élément XMLHttpRequest local au navigateur. Par exemple, il contient des maisons responseText et responseXML, ainsi qu’une technique getResponseHeader().

Alors que le mécanisme de livraison est différent de XMLHttpRequest (par exemple, une balise de script pour une requête JSONP), l’élément jqXHR simule la capacité XHR native lorsque cela est possible.

Depuis jQuery 1.5.1, l’objet jqXHR porte en outre la méthode overrideMimeType() (elle a également changé dans jQuery 1.4.X, mais a été brièvement supprimée dans jQuery 1.5). Par exemple, la technique .overrideMimeType() peut être utilisée dans la fonction de rappel beforeSend() pour modifier l’en-tête Content-Type de la réponse.

Les réponses distinctes aux appels $.Ajax() sont soumises à des types spécifiques de prétraitement avant d’être transmises au gestionnaire de réussite. Les types d’informations disponibles sont text, HTML, XML, JSON, JSONP et script.

L’option data peut soit envoyer les données dans une chaîne de requête de la forme key1=value1&key2=value2 ou un objet de la forme {key1: 'value1', key2: 'value2'}.

En raison des restrictions de sécurité du navigateur, la plupart des requêtes AJAX sont soumises à la même couverture d’origine ; la requête ne peut pas récupérer efficacement les faits d’un autre domaine, sous-domaine, port ou protocole.

Trouvez plus d’informations dans la documentation .ajax().

Comprenons-le avec l’exemple suivant. Les codes suivants ne peuvent pas être exécutés tels quels et n’ont aucune sortie.

Il doit être ajouté au code existant pour voir les sorties.

<form id="myForm">
    <label for="name">Name</label>
    <input id="name" name="name" type="text" value="Smith" />
    <input type="submit" value="Send" />
</form>

$('#myForm').submit(function(event) {
  event.preventDefault();
  $.ajax({
     method: 'POST',
     url: '/open/hello-world',
     data: {name: 'Smith', location: 'Doe'}
   }).done(function(msg) {
    alert('Data Saved: ' + msg);
  });
})

Une fois que l’utilisateur a soumis le formulaire dans l’exemple ci-dessus, un appel AJAX est envoyé au serveur avec l’URL et les paramètres spécifiés. Lorsque le serveur revient avec un message de réussite, vous pouvez imprimer le message sur la console ou avertir l’utilisateur avec le message approprié.