Explication détaillée de l'utilisation de jQuery Ajax (load, post, get, ajax)

Cet article vous apporte principalement une discussion détaillée sur l'utilisation de jQuery Ajax (load, post, get, ajax). L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Aujourd'hui, j'ai vu des internautes dans le groupe poser des questions sur les différences entre Jquery Ajax (load, post, get, ajax). Maintenant, j'ai compilé un article, dans l'espoir d'aider les internautes, regardons d'abord). quelques méthodes simples.

Ces méthodes sont toutes des méthodes qui encapsulent jQuery.ajax() pour faciliter notre utilisation. Bien sûr, si vous souhaitez gérer une logique complexe, vous devez toujours utiliser jQuery .ajax() (ceci. sera discuté plus tard).

1.load( url, [data], [callback] ) : Chargez le code du fichier HTML distant et insérez-le dans le DOM.

url (String) : L'adresse URL de la page HTML demandée.

data (Map) : (paramètre facultatif) données clé/valeur envoyées au serveur.

callback (Callback) : (paramètre facultatif) La fonction de rappel lorsque la demande est terminée (n'a pas besoin de réussir).

Cette méthode utilise la méthode GET par défaut. Si le paramètre [data] contient des données, elles seront automatiquement converties en méthode POST. Dans jQuery 1.2, vous pouvez spécifier le sélecteur

pour filtrer le document HTML chargé, et seul le code HTML filtré sera inséré dans le DOM. La syntaxe est du type "url #some > selector".

Cette méthode peut facilement charger dynamiquement certains fichiers HTML, tels que des formulaires.

Exemple de code :

$(".ajax.load").load("http:
//www.jb51.net",function (responseText, textStatus, XMLHttpRequest)
{this;//在这里this指向的是当前的DOM对象，
即$(".ajax.load")[0]
 //alert(responseText);
//请求返回的内容
/alert(textStatus);
//请求状态：success，error
//alert(XMLHttpRequest);
//XMLHttpRequest对象});

Remarque : je ne sais pas pourquoi l'écriture d'un chemin absolu vers une URL provoquera une erreur dans FF. Si vous le savez, faites-le-moi savoir. Les exemples get() et post() ci-dessous utilisent des chemins absolus, donc sous FF, vous obtiendrez des erreurs et ne verrez pas les résultats renvoyés. Il existe également des exemples get() et post() appelés inter-domaines. J'ai trouvé qu'il n'y avait aucun moyen d'obtenir les résultats après les avoir téléchargés, j'ai donc supprimé le bouton Exécuter.

2. jQuery.get( url, [data], [callback] ) : Utilisez la méthode GET pour effectuer des requêtes asynchrones

Paramètres :

url (String) : Envoyer Adresse URL demandée.

données (Carte) : (Facultatif) Les données à envoyer au serveur, exprimées sous forme de paires clé/valeur, seront ajoutées à l'URL de la requête sous forme de QueryString.

callback (Fonction) : (Facultatif) Fonction de rappel lorsque le chargement est réussi (cette méthode est appelée uniquement lorsque l'état de retour de la réponse est réussi).

Il s'agit d'une simple fonction de requête GET pour remplacer le complexe $.ajax. La fonction de rappel peut être appelée lorsque la demande aboutit. Si vous devez exécuter une fonction en cas d'erreur, utilisez $.ajax.

Exemple de code :

$.get("./Ajax.aspx", {Action:"get",Name:"lulu"},
function (data, textStatus)
{//返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.this; 
// 在这里this指向的是Ajax请求的选项配置信息，请参考下图alert(data);
//alert(textStatus);
//请求状态：success，error等等。

Bien sûr, l'erreur ne peut pas être détectée ici, car la fonction de rappel ne sera pas exécutée du tout en cas d'erreur //alert(this); });

Cliquez pour envoyer la requête :

Ceci dans la fonction de rappel jQuery.get() pointe vers les informations de configuration de l'option de la requête Ajax :

3. jQuery.post( url, [data] , [callback], [type] ) : Utilisez la méthode POST pour effectuer des requêtes asynchrones

Paramètres :

url (String) : adresse URL pour envoyer le request.

data ( Map) : (facultatif) Les données à envoyer au serveur, exprimées sous forme de paires clé/valeur.

callback (Fonction) : (Facultatif) Fonction de rappel lorsque le chargement est réussi (cette méthode est appelée uniquement lorsque l'état de retour de la réponse est réussi).

type (String) : (Facultatif) La description officielle est : Type de données à envoyer. En fait, il doit s'agir du type demandé par le client (JSON, XML, etc.)

Il s'agit d'une simple fonction de requête POST pour remplacer le complexe $.ajax. La fonction de rappel peut être appelée lorsque la demande aboutit. Si vous devez exécuter une fonction en cas d'erreur, utilisez $.ajax.

Exemple de code :

Ajax.aspx :

Response.ContentType = "application/json";Response.Write("{result: '" + Request["Name"] + ",你好！(这消息来自服务器)'}");

Code jQuery :

$.post("Ajax.aspx", { Action: "post", Name: "lulu" },function (data, textStatus)
{// data 可以是 xmlDoc, jsonObj, html, text, 等等.//this; 
// 这个Ajax请求的选项配置信息，请参考jQuery.get()说到的thisalert(data.result);}, "json");

Cliquez pour soumettre :

ici Définissez le format de la requête sur "json" :

Si vous définissez le format de la requête sur "json" et que vous ne définissez pas le ContentType renvoyé par la réponse sur : Response.ContentType = "application/json" ; Vous ne pourrez pas capturer les données renvoyées.

Notez que alert(data.result); puisque l'en-tête Accept est défini sur "json", les données renvoyées ici sont un objet, et il n'est pas nécessaire d'utiliser eval() pour le convertir en objet. .

4. jQuery.getScript( url, [callback] ) : Demande de chargement et d'exécution d'un fichier JavaScript via la méthode GET.

Paramètres

url (String) : L'adresse du fichier JS à charger.

callback (Fonction) : (Facultatif) Fonction de rappel après un chargement réussi.

Avant jQuery 1.2, getScript ne pouvait appeler que des fichiers JS dans le même domaine. Dans la version 1.2, vous pouvez appeler des fichiers JavaScript sur plusieurs domaines. Remarque : Safari 2 ou version antérieure ne peut pas exécuter de scripts de manière synchrone dans la portée globale. Si vous ajoutez un script via getScript, veuillez ajouter une fonction de retard.

Cette méthode peut être utilisée, par exemple, pour charger les fichiers JS requis par l'éditeur lorsque seul l'éditeur est focus(). Voici quelques exemples de codes :

Charger et exécuter le test. js.

Code jQuery :

$.getScript("test.js");

Chargez et exécutez AjaxEvent.js et affichez les informations après succès.

Code jQuery :

$.getScript("AjaxEvent.js", function(){alert("AjaxEvent.js est chargé et exécuté. Cliquez ensuite sur le bouton Obtenir ou Publier ci-dessus Voir le différence ? ");});

Événement jQuery Ajax

Les requêtes Ajax génèrent plusieurs événements différents auxquels nous pouvons nous abonner et y gérer notre logique. Il existe deux types d'événements Ajax dans jQuery : les événements locaux et les événements globaux.

Les événements locaux sont définis au sein de la méthode lors de chaque requête Ajax, par exemple :

$.ajax({beforeSend: function(){// Gérer l'événement beforeSend},complete : function( ){// Gérer l'événement complet}// ...});

L'événement global est déclenché par chaque requête Ajax. Il sera diffusé à tous les éléments du DOM. Ci-dessus Le script chargé dans le. L'exemple getScript() est l'événement Ajax global. Les événements globaux peuvent être définis comme suit :

$("#loading").bind("ajaxSend", function(){$(this).show();}).bind("ajaxComplete", function( ){$(this).hide();});

ou :

$("#loading").ajaxStart(function(){$(this).show () ;});

Nous pouvons désactiver les événements globaux dans des requêtes spécifiques, définissez simplement l'option globale :

$.ajax({url: "test.html",global : false, // Désactiver les événements Ajax globaux.// ...});

L'article ci-dessus traite en détail de l'utilisation de jQuery Ajax (load, post, get, ajax), avec laquelle l'éditeur a partagé C'est tout votre contenu, j'espère qu'il pourra vous donner une référence, et j'espère que vous soutiendrez davantage Script House.

Recommandations associées :

Tutoriel simple d'utilisation d'Ajax

javascript jQuery $.post $.ajax utilisation

Utilisation AJAX super simple de jquery_jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!