Explication détaillée du traitement de synchronisation de $.ajax() et $.getJson() dans jQuery_jquery

1. Avant-propos

Pourquoi la synchronisation est nécessaire ? Parce que parfois, lorsque nous enregistrons un bouton de soumission pour soumettre les données du formulaire, une série d'opérations de requête ajax asynchrones seront effectuées avant l'action de soumission, mais le code de la page js sera exécuté dans l'ordre de haut en bas. . , si vous effectuez une opération asynchrone pendant ce processus, vous ne pourrez pas obtenir le résultat renvoyé par l'opération asynchrone en cours, et js continuera à exécuter l'instruction suivante, nous devons donc synchroniser la demande d'opération pour obtenir l'arrière-plan. renvoie le résultat des données, puis détermine si le résultat est cohérent avant d'exécuter l'instruction suivante js.

2. Explication des paramètres $.ajax()

url : L'adresse à laquelle envoyer la demande.

type : La méthode de requête (post ou get) est par défaut get.

timeout : nécessite un paramètre de type Number et définit le délai d'expiration de la requête (millisecondes).

async : Le paramètre par défaut est vrai, toutes les requêtes sont des requêtes asynchrones. Requête synchrone, définie sur false. Notez qu'une requête synchrone verrouillera le navigateur et que l'utilisateur devra attendre que la requête soit terminée avant de pouvoir effectuer d'autres opérations. -----C'est le facteur de réglage le plus important pour l'opération de synchronisation

cache : La valeur par défaut est vraie. Si le navigateur dispose d'un cache, les données mises en cache du navigateur seront obtenues. Le réglage sur false n'obtiendra pas les données mises en cache

.

données : Nécessite des paramètres de type Objet ou Chaîne, données envoyées au serveur. Si ce n'est pas une chaîne, elle sera automatiquement convertie en format chaîne

Formule. La demande d'obtention sera ajoutée à l'URL. Pour empêcher cette conversion automatique, cochez l'option processData. L'objet doit être au format clé/valeur

La formule, par exemple, {foo1:"bar1",foo2:"bar2"} est convertie en &foo1=bar1&foo2=bar2. S'il s'agit d'un tableau, JQuery sera automatiquement différent

Les valeurs correspondent au même nom. Par exemple, {foo:["bar1","bar2"]} est converti en &foo=bar1&foo=bar2.

dataType : nécessite un paramètre de type String, le type de données qui devrait être renvoyé par le serveur. S'il n'est pas spécifié, JQuery basera automatiquement le package http sur mime

Les informations renvoient ResponseXML ou ResponseText et sont transmises en tant que paramètre de fonction de rappel.

Les types disponibles sont les suivants :

xml : renvoie un document XML pouvant être traité avec JQuery.

html : renvoie les informations HTML en texte brut ; la balise de script incluse sera exécutée une fois insérée dans le DOM.

script : renvoie le code JavaScript en texte brut. Les résultats ne sont pas automatiquement mis en cache. Sauf si les paramètres du cache sont définis. Notez que lors de requêtes distantes (pas sous le même domaine), toutes les requêtes de publication seront converties en requêtes get.

json : renvoie les données JSON.

jsonp : format JSONP. Lors de l'appel d'une fonction à l'aide du formulaire SONP, tel que myurl?callback=?, JQuery remplacera automatiquement le dernier "?" par le nom de fonction correct pour exécuter la fonction de rappel.

text : renvoie une chaîne de texte brut.

beforeSend : nécessite un paramètre de type Function. Vous pouvez modifier la fonction de l'objet XMLHttpRequest avant d'envoyer la requête, par exemple en ajoutant un en-tête HTTP personnalisé. Si false est renvoyé dans beforeSend, cette requête ajax peut être annulée. L'objet XMLHttpRequest est le seul paramètre.

fonction(XMLHttpRequest){
This ; //Le paramètre d'options passé lors de l'appel de cette requête ajax
            }

complete : nécessite un paramètre de type Function, une fonction de rappel appelée une fois la requête terminée (appelée lorsque la requête réussit ou échoue). Paramètres : objet XMLHttpRequest et une chaîne décrivant le type de requête réussie.

fonction(XMLHttpRequest, textStatus){
This ; //Le paramètre d'options passé lors de l'appel de cette requête ajax
          }

succès : nécessite des paramètres de type Function. La fonction de rappel appelée une fois la requête réussie a deux paramètres.

(1) Données renvoyées par le serveur et traitées selon le paramètre dataType.

(2) Une chaîne décrivant le statut.

fonction(données, textStatus){

//les données peuvent être xmlDoc, jsonObj, html, texte, etc. this;

//Le paramètre options passé lors de l'appel de cette requête ajax

erreur : nécessite un paramètre de type Function, une fonction qui est appelée lorsque la requête échoue. Cette fonction a trois paramètres, à savoir l'objet XMLHttpRequest, le message d'erreur et l'objet d'erreur capturé (facultatif).

La fonction d'événement ajax est la suivante :

fonction (XMLHttpRequest, textStatus, errorThrown){
//Normalement, un seul parmi textStatus et errorThrown contient des informations
This ; //Le paramètre d'options passé lors de l'appel de cette requête ajax
>

contentType : nécessite un paramètre de type String Lors de l'envoi d'informations au serveur, le type d'encodage du contenu est par défaut "application/x-www-form-urlencoded". Cette valeur par défaut convient à la plupart des applications.

dataFilter : nécessite des paramètres de type Function, une fonction qui prétraite les données originales renvoyées par Ajax. Fournissez deux paramètres : data et type. data est les données originales renvoyées par Ajax et type est le paramètre dataType fourni lors de l'appel de jQuery.ajax. La valeur renvoyée par la fonction sera ensuite traitée par jQuery.

fonction(données, type){
//Renvoyer les données traitées
                    renvoyer des données ;
            }

global : doit être un paramètre de type booléen, et la valeur par défaut est vraie. Indique s’il faut déclencher l’événement ajax global. La définition sur false ne déclenchera pas d'événements ajax globaux, ajaxStart ou ajaxStop peuvent être utilisés pour contrôler divers événements ajax.

ifModified : nécessite un paramètre de type booléen et la valeur par défaut est false. Obtenez de nouvelles données uniquement lorsque les données du serveur changent. La base pour déterminer les modifications des données du serveur est l'information d'en-tête Last-Modified. La valeur par défaut est false, ce qui signifie que les informations d'en-tête sont ignorées.

jsonp : nécessite des paramètres de type String, et réécrit le nom de la fonction de rappel dans une requête jsonp. Cette valeur est utilisée pour remplacer la partie "callback" du paramètre URL dans une requête GET ou POST telle que "callback=?". Par exemple, {jsonp:'onJsonPLoad'} entraînera la transmission de "onJsonPLoad=?". le serveur.

username : doit être un paramètre de type String, utilisé pour répondre au nom d'utilisateur de la demande d'authentification d'accès HTTP.

mot de passe : nécessite un paramètre de type String, qui est le mot de passe utilisé pour répondre à la demande d'authentification d'accès HTTP.

processData : nécessite un paramètre de type booléen et la valeur par défaut est vraie. Par défaut, les données envoyées seront converties en objet (pas techniquement en chaîne) pour correspondre au type de contenu par défaut « application/x-www-form-urlencoded ». Si vous souhaitez envoyer des informations sur l'arborescence DOM ou d'autres informations que vous ne souhaitez pas convertir, définissez-la sur false.

scriptCharset : doit être un paramètre de type String. Il sera utilisé pour forcer la modification du jeu de caractères (charset) uniquement lorsque le dataType est "jsonp" ou "script" lors de la requête. , et le type est GET. Généralement utilisé lorsque les encodages de contenu local et distant sont différents.

3. Paramètres de synchronisation $.getJson()

$.getJson() lui-même est une méthode de fonctionnement asynchrone et doit être configuré avant de pouvoir être synchronisé

Ajoutez $.ajaxSettings.async = false; (exécution synchrone) avant l'exécution. Après avoir exécuté votre code, revenez à $.ajaxSettings.async = true dans le temps (exécution asynchrone) sinon cela affectera le code à d'autres endroits. doit être exécuté de manière asynchrone.

4. Exemples d'opérations spécifiques

1. $.ajax()

 //点击新增按钮,新增数据
      $("#btnAdd").click(function () {
        var bool = true;//存储异步请求结果是否通过
        //1、验证优惠额度正确性
        var index = parseInt($("#intGiftMold").val());
        if (index == 1) {
          //满减
          var reg = /^[0-9]+,[0-9]+$/;
          if (!reg.test($("#strDiscounts").val())) {
            $.messager.alert('错误提示', '满减优惠额度格式不正确', 'error');
            return false;
          }
        }
        else if (index == 2) {
          var reg = /^0\.[0-9]+$/;
          if (!reg.test($("#strDiscounts").val())) {
            $.messager.alert('错误提示', '折扣优惠额度格式不正确', 'error');
            return false;
          }
        }
        else if (index == 3) {
          var reg = /^[1-9]+[0-9]$/;
          if (!reg.test($("#strDiscounts").val())) {
            $.messager.alert('错误提示', '指定金额优惠额度格式不正确', 'error');
            return false;
          }
        }
        //2、验证优惠范围正确性
        var index = parseInt($("#intGiftRange").val());
        if (index == 1) { //选择全站
        }
        else if (index == 3) {  //判断商品ID
          $.ajax({
           type: "post",
            url: "Gift_Add.aspx",
           cache: false,
            async: false,  //设置同步了~~~~~~~~~
           dataType: "json",
            data: { "method": "isExistInfoTitle", "intInfoID": $("#intInfoID").val() },
            success: function (data) {
              if (data.result == "false") {
                $.messager.alert('错误提示', '商品ID不存在', 'error');
                bool = false;
               $("#isExistInfoTitle").css({ "display": "" });
              }
              else {
                $("#isExistInfoTitle").css({ "display": "none" });
                bool = true;
              }
            }
          });
        }
          });
        }
if (bool == false) {//如果bool为false才返回，true继续往下走
          return false;  //不能在异步方法里面return，不起作用
        }
        var validate = $("#form").form("validate");
        if (!validate) {//表单验证不通过
          return false;
        }
        //当上面全部验证通过了执行新增操作
        $.messager.confirm('温馨提示', '是否确认添加', function (r) {
          if (r) {
            $.post("Gift_Add.aspx?method=addGift", $("#form").serialize(), function (data) {
              $.messager.alert('成功提示', '添加成功', 'info');
            });
          }
        });
      });

2. $.getJson()

 //点击新增按钮,新增数据
      $("#btnAdd").click(function () {
        var bool = true;//存储异步请求结果是否通过
        //1、验证优惠额度正确性
        var index = parseInt($("#intGiftMold").val());
        if (index == 1) {
          //满减
          var reg = /^[0-9]+,[0-9]+$/;
          if (!reg.test($("#strDiscounts").val())) {
            $.messager.alert('错误提示', '满减优惠额度格式不正确', 'error');
            return false;
          }
        }
        else if (index == 2) {
          var reg = /^0\.[0-9]+$/;
          if (!reg.test($("#strDiscounts").val())) {
            $.messager.alert('错误提示', '折扣优惠额度格式不正确', 'error');
            return false;
          }
        }
        else if (index == 3) {
          var reg = /^[1-9]+[0-9]$/;
          if (!reg.test($("#strDiscounts").val())) {
            $.messager.alert('错误提示', '指定金额优惠额度格式不正确', 'error');
            return false;
          }
        }
        //2、验证优惠范围正确性
        var index = parseInt($("#intGiftRange").val());
        if (index == 1) { //选择全站
        }
        else if (index == 3) {  //判断商品ID
           $.ajaxSettings.async = false; //设置getJson同步
          $.getJSON("Gift_Add.aspx", { "method": "isExistInfoTitle", "intInfoID": $("#intInfoID").val() }, function (data) {
            if (data.result == "false") {
              $.messager.alert('错误提示', '商品ID不存在', 'error');
              bool = false;
              $("#isExistInfoTitle").css({ "display": "" });
            }
            else {
              $("#isExistInfoTitle").css({ "display": "none" });
              bool = true;
            }
          });
          $.ajaxSettings.async = true;//设置getJson异步
        }
          });
        }
        if (bool == false) {//如果bool为false才返回，true继续往下走
          return false;  //不能在异步方法里面return，不起作用
        }
        var validate = $("#form").form("validate");
        if (!validate) {//表单验证不通过
          return false;
        }
        //当上面全部验证通过了执行新增操作
        $.messager.confirm('温馨提示', '是否确认添加', function (r) {
          if (r) {
            $.post("Gift_Add.aspx?method=addGift", $("#form").serialize(), function (data) {
              $.messager.alert('成功提示', '添加成功', 'info');
            });
          }
        });
      });

Résumé :

$.ajax est l'implémentation AJAX des méthodes traditionnelles get et post
$.getJSON est une implémentation AJAX de classe jsonp (lecture de données à distance)
La raison pour laquelle on l'appelle AJAX-like est que bien qu'il soit encapsulé dans la classe ajax de jq, il est en fait implémenté via le nœud de script

La différence entre $.getJSON et $.ajax est :

Lors de l'envoi, $.getJSON passera un nom de fonction de rappel (jq en donnera un par défaut)
A la réception, cette fonction de rappel sera appelée
Le côté serveur de $.getJSON doit ajouter le nom de la fonction de rappel entrant avant les données json
De ce fait, la chaîne renvoyée n'est plus json (le format est erroné)
Par conséquent, $.ajax avec l'attribut dataType : "json" entrera dans la branche d'erreur

en raison d'une erreur d'analyse json