9.1 Objet $ et méthode ajax dans jQuery
jQuery a également un objet global spécial pour travailler avec le réseau. Comme vous pouvez le deviner, il s'appelle $
. Oui, c'est le nom. Mais c'est simple et pratique.
Supposons que vous souhaitiez envoyer une requête à une API dans votre JavaScript et traiter la réponse reçue. Cela peut être fait comme ceci :
$.ajax({
type: "POST",
url: "api.codegym.cc",
data: {name: 'Bill', location: 'Radmond'},
success: function(msg){
alert( "Person found: " + msg );
}
});
C'est tout, c'est tout le code. $
Nous appelons la méthode sur l'objet ajax()
, où nous passons l'objet qui décrit tout ce dont nous avons besoin : à la fois la requête et la réponse.
- Le champ
type
précise le type de requête HTTP :GET
ouPOST
- Le champ
url
préciseurl
à qui la demande sera envoyée. - Le champ
data
spécifie les données de la requête au format JSON - Le champ success spécifie une fonction à appeler après une réponse réussie du serveur.
9.2 Requêtes utiles
Mais si vous n'avez pas besoin de transférer de données, la demande peut être écrite encore plus courte. Par exemple, vous pouvez écrire une simple requête POST comme ceci :
$.post("ajax/test.html", function( data ) {
$( ".result" ).html( data );
});
Savez-vous à quoi sert le code $( ".result" ).html( data );
? Essayons de deviner...
Il trouve un élément avec la classe result dans le document et y ajoute du code HTML - data data
. Ainsi, en quelques lignes, vous pouvez télécharger des données depuis le serveur et les ajouter à votre page. Eh bien, n'est-ce pas une beauté? :)
Une requête GET peut également être écrite en quelques lignes :
$.get("ajax/test.html"., function( data ) {
$( ".result" ).html( data );
});
Vous souhaitez télécharger et exécuter un script ?
$.ajax({
method: "GET",
url: "test.js",
dataType: "script"
});
Obtenir la dernière page HTML ?
$.ajax({
url: "test.html",
cache: false
})
.done(function( html ) {
$( "#results" ).append( html );
});
Il existe une très bonne documentation jQuery sur Internet :
De plus, toutes les questions courantes sont facilement googlables et se trouvent sur StackOverflow.