jQuery_jqueryの$.ajax()と$.getJson()の同期処理の詳細説明

1. はじめに

なぜ同期が必要なのでしょうか? フォームデータを送信するために送信ボタンを登録すると、送信アクションの前に一連の非同期 Ajax リクエスト操作が実行されることがありますが、ページの JS コードは上から下に順番に実行されるからです。 . 、このプロセス中に非同期操作を実行すると、現在の非同期操作によって返された結果を取得できなくなり、js は次のステートメントの実行を続行するため、操作リクエストを同期してバックグラウンドを取得する必要があります。データの結果を返し、js next ステートメントを実行する前に結果が一貫しているかどうかを判断します。

2. $.ajax() パラメータの説明

url: リクエストを送信するアドレス。

type: リクエストメソッド (post または get) のデフォルトは get です。

timeout: には Number 型のパラメーターが必要で、リクエストのタイムアウト (ミリ秒) を設定します。

async: デフォルト設定は true で、すべてのリクエストは非同期リクエストです。同期リクエスト。 false に設定します。同期リクエストはブラウザをロックするため、ユーザーはリクエストが完了するまで他の操作を実行する必要があることに注意してください。 -----これは同期動作において最も重要な設定要素です

cache: ブラウザにキャッシュがある場合、ブラウザのキャッシュ データは取得されません。

data: サーバーに送信されるデータ、オブジェクト型または文字列型のパラメータが必要です。文字列でない場合は、自動的に文字列形式に変換されます

式。取得リクエストは URL に追加されます。この自動変換を防ぐには、processData オプションをチェックします。オブジェクトはキー/値形式である必要があります

式 (例: {foo1:"bar1",foo2:"bar2"}) は &foo1=bar1&foo2=bar2 に変換されます。配列の場合、JQueryは自動的に異なります

値は同じ名前に対応します。たとえば、{foo:["bar1","bar2"]} は &foo=bar1&foo=bar2 に変換されます。

dataType: には、サーバーによって返されることが予期されるデータ型である文字列型のパラメーターが必要です。指定しない場合、JQuery は自動的に mime

に基づいて http パッケージを作成します。

情報はresponseXMLまたはresponseTextを返し、コールバック関数のパラメータとして渡されます。

利用可能なタイプは次のとおりです:

xml: JQuery で処理できる XML ドキュメントを返します。

html: プレーンテキストの HTML 情報を返します。含まれている script タグは、DOM に挿入されると実行されます。

スクリプト: プレーンテキストの JavaScript コードを返します。結果は自動的にキャッシュされません。キャッシュパラメータが設定されていない限り。 (同じドメインの下ではなく) リモート要求を行う場合、すべての post 要求が get 要求に変換されることに注意してください。

json: JSON データを返します。

jsonp: JSONP 形式。 myurl?callback=? などの SONP フォームを使用して関数を呼び出すと、JQuery は最後の「?」を正しい関数名に自動的に置き換えてコールバック関数を実行します。

text: プレーンテキスト文字列を返します。

beforeSend: には Function タイプのパラメーターが必要です。カスタム HTTP ヘッダーの追加など、リクエストを送信する前に XMLHttpRequest オブジェクトの関数を変更できます。 beforeSend で false が返された場合、この ajax リクエストはキャンセルできます。 XMLHttpRequest オブジェクトが唯一のパラメータです。

関数(XMLHttpRequest){
This; //この ajax リクエストを呼び出すときに渡されるオプション パラメータ
}

complete: には、リクエストの完了後に呼び出される (リクエストが成功または失敗したときに呼び出される) 関数タイプのパラメーターであるコールバック関数が必要です。 パラメータ: XMLHttpRequest オブジェクトと、成功したリクエストの種類を説明する文字列。

関数(XMLHttpRequest, textStatus){
This; //この ajax リクエストを呼び出すときに渡されるオプション パラメータ
}

成功: には、関数タイプのパラメーターが必要です。リクエストが成功した後に呼び出されるコールバック関数には、2 つのパラメーターがあります。

(1) サーバーから返され、dataType パラメーターに従って処理されたデータ。

(2) ステータスを説明する文字列。

関数(データ, textStatus){

//データは xmlDoc、jsonObj、html、テキストなどです。 this;

//この ajax リクエストを呼び出すときに渡されるオプション パラメーター

エラー: には、リクエストが失敗したときに呼び出される関数である関数タイプのパラメーターが必要です。この関数には、XMLHttpRequest オブジェクト、エラー メッセージ、キャプチャされたエラー オブジェクト (オプション) という 3 つのパラメータがあります。

ajax イベント関数は次のとおりです:

関数(XMLHttpRequest, textStatus, errorThrown){
//通常、textStatus と errorThrown のどちらか一方のみに情報が含まれます
This; //この ajax リクエストを呼び出すときに渡されるオプション パラメータ
}

contentType: には、文字列型のパラメーターが必要です。サーバーに情報を送信する場合、コンテンツのエンコーディング タイプはデフォルトで「application/x-www-form-urlencoded」になります。このデフォルト値は、ほとんどのアプリケーションに適しています。

dataFilter: には、Ajax から返された元のデータを前処理する関数である Function タイプのパラメーターが必要です。 データとタイプの 2 つのパラメータを指定します。 data は Ajax によって返される元のデータで、type は jQuery.ajax を呼び出すときに指定される dataType パラメーターです。関数によって返された値は、jQuery によってさらに処理されます。

関数(データ、型){
//処理されたデータを返します
データを返す;
}

global: はブール型パラメーターである必要があり、デフォルトは true です。グローバル ajax イベントをトリガーするかどうかを示します。 false に設定すると、グローバル ajax イベントはトリガーされません。ajaxStart または ajaxStop を使用して、さまざまな ajax イベントを制御できます。

ifModified: にはブール型パラメーターが必要で、デフォルトは false です。サーバー データが変更された場合にのみ新しいデータを取得します。サーバー データの変更を判断するための基礎となるのは、Last-Modified ヘッダー情報です。デフォルト値は false で、ヘッダー情報が無視されることを意味します。

jsonp: には String 型のパラメーターが必要で、jsonp リクエスト内のコールバック関数の名前を書き換えます。 この値は、「callback=?」などの GET または POST リクエストの URL パラメーターの「callback」部分を置換するために使用されます。たとえば、{jsonp:'onJsonPLoad'} は「onJsonPLoad=?」に渡されます。サーバー。

username: は、HTTP アクセス認証リクエストのユーザー名に応答するために使用される String タイプのパラメーターである必要があります。

password: には、HTTP アクセス認証リクエストに応答するために使用されるパスワードである文字列型パラメータが必要です。

processData: にはブール型パラメーターが必要で、デフォルトは true です。デフォルトでは、送信されたデータは、デフォルトのコンテンツ タイプ「application/x-www-form-urlencoded」に一致するオブジェクト (厳密には文字列ではない) に変換されます。 DOM ツリー情報やその他の変換したくない情報を送信する場合は、false に設定します。

scriptCharset: は String 型パラメータである必要があります。リクエスト中に dataType が「jsonp」または「script」の場合にのみ文字セット (charset) を強制的に変更するために使用されます。 、タイプは GET です。通常、ローカルとリモートのコンテンツのエンコーディングが異なる場合に使用されます。

3. $.getJson() 同期設定

$.getJson() 自体は非同期操作メソッドであるため、同期する前に設定する必要があります

コードの実行前に $.ajaxSettings.async = false (同期実行) を追加します。そうしないと、他の場所のコードに影響します。非同期で実行する必要があります。

4. 具体的な操作例

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');
            });
          }
        });
      });

概要:

$.ajax は、従来の get メソッドと post メソッドの AJAX 実装です
$.getJSON は jsonp (リモート データ読み取り) クラスの AJAX 実装です
AJAX ライクと呼ばれる理由は、jq の ajax クラスにカプセル化されていますが、実際にはスクリプト ノード

を通じて実装されるためです。

$.getJSON と $.ajax の違いは次のとおりです:

送信時に、$.getJSON はコールバック関数名を渡します (jq がデフォルトでコールバック関数名を与えます)
受信時には、このコールバック関数が呼び出されます
$.getJSON のサーバー側では、json データの前に受信コールバック関数名を追加する必要があります
このため、返される文字列は json ではなくなりました (形式が間違っています)
したがって、dataType: "json" 属性を持つ $.ajax は、json 解析エラーによりエラー ブランチ

に入ります。