Explication détaillée des exemples d'utilisation de la fonction jQuery.ajax() dans jquery

La fonction

jQuery.ajax() est l'implémentation de la technologie AJAX encapsulée par jQuery Grâce à cette fonction, nous pouvons obtenir des données sur le serveur distant sans actualiser la page en cours. est utilisé pour charger des données distantes via des requêtes HTTP en arrière-plan.

La fonction jQuery.ajax() est l'implémentation AJAX sous-jacente de jQuery. jQuery.get(), jQuery.post(), load(), jQuery.getJSON(), jQuery.getScript() et d'autres fonctions sont toutes des formes simplifiées de cette fonction (elles appellent toutes cette fonction, mais les paramètres sont différents ou avoir quelques différences omises).

Cette fonction appartient à l'objet jQuery global (peut également être comprise comme une fonction statique).

Syntaxe

jQuery 1.0 a ajouté cette fonction statique. La fonction jQuery.ajax() a les deux utilisations suivantes :

Utilisation 1 :

jQuery.ajax( [ settings ] ] )

Utilisation 2 : jQuery 1.5 prend désormais en charge cette utilisation.

jQuery.ajax( url [, settings ] ] )

L'utilisation 2 est une variante de l'utilisation 1. Elle extrait simplement l'URL de l'attribut facultatif dans les paramètres de l'objet paramètre en tant que paramètre indépendant.

Paramètres

Veuillez trouver le paramètre correspondant en fonction du nom du paramètre défini dans la section de syntaxe précédente.

url Demande d'URL de type chaîne String.

paramètres Facultatif/Classe d'objet est un objet Objet , dont chaque propriété est utilisée pour spécifier les paramètres supplémentaires requis pour envoyer la requête. Les paramètres sont un objet.

Valeur de retour

jQuery.ajax()La valeur de retour de la fonction est de type jqXHR, renvoyant l'objet jqXHR du requête actuelle ( jQuery 1.4 et les versions antérieures renvoient l'objet XMLHttpRequest natif).

Exemple de description de code :

Si aucun paramètre n'est spécifié pour jQuery.ajax(), la requête par défaut est la page actuelle et les données renvoyées ne seront pas traitées.

Dans l'objet settings de la fonction jQuery.ajax(), les attributs couramment utilisés sont : url, type, async, data, dataType, success, error, complete, beforeSend, timeout, etc.

Veuillez vous référer au code HTML initial suivant :

<div id="content"></div>

Ce qui suit est l'exemple de code jQuery lié à la fonction jQuery.ajax() pour démontrer l'utilisation spécifique de jQuery.ajax () fonction :

$.ajax({
     url: "jquery_ajax.php"
    , type: "POST"
    , data: "name=codeplayer&age=18"
    , success: function( data, textStatus, jqXHR ){
        // data 是返回的数据
        // textStatus 可能为"success"、"notmodified"等
        // jqXHR 是经过jQuery封装的XMLHttpRequest对象
        alert("返回的数据" + data);
    }
});

$.ajax({
     url: "jquery_ajax.php?page=1&id=3"
    , type: "POST"
    // jQuery会自动将对象数据转换为 "name=codeplayer&age=18&uid=1&uid=2&uid=3"
    , data: { name:"codeplayer", age:18, uid: [1, 2, 3] }
    // 请求成功时执行
    , success: function( data, textStatus, jqXHR ){
        alert("返回的数据" + data);
    }
    // 请求失败时执行
    , error: function(jqXHR, textStatus, errorMsg){
        // jqXHR 是经过jQuery封装的XMLHttpRequest对象
        // textStatus 可能为： null、"timeout"、"error"、"abort"或"parsererror"
        // errorMsg 可能为： "Not Found"、"Internal Server Error"等
        alert("请求失败：" + errorMsg);
    }
});

// 将url单独提取出来作为第一个参数(jQuery 1.5+才支持)
$.ajax("jquery_ajax.php?action=type&id=3", {
     dataType: "json" // 返回JSON格式的数据
    , success: function( data, textStatus, jqXHR ){
        // 假设返回的字符串数据为{ "name": "CodePlayer", age: 20 }
        // jQuery已帮我们将该JSON字符串转换为对应的JS对象，可以直接使用
        alert( data.name ); // CodePlayer
    }   
});

$.ajax( {
    // 注意这里有个参数callback=?
     url: "http://cross-domain/jquery_ajax.php?name=Jim&callback=?&age=21"
    , async: false // 同步请求，发送请求后浏览器将被锁定，只有等到该请求完成(无论成功或失败)后，用户才能操作，js代码才会继续执行
    , dataType: "jsonp" // 返回JSON格式的数据
    , success: function( data, textStatus, jqXHR ){
        // 假设返回的字符串数据为{ "site_name": "CodePlayer", "site_desc": "专注于编程开发技术分享" }
        // jQuery已帮我们将该JSON字符串转换为对应的JS对象，可以直接使用
        alert( data.site_desc ); // 专注于编程开发技术分享
    }   
});

$.ajax( {
    // 加载指定的js文件到当前文档中
     url: "http://code.jquery.com/jquery-1.8.3.min.js"
    , dataType: "script"
});

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!