Penjelasan terperinci tentang pemprosesan penyegerakan $.ajax() dan $.getJson() dalam jQuery_jquery

1 Mengapa penyegerakan diperlukan? Kerana kadangkala apabila kita mendaftar butang hantar untuk menyerahkan data borang, satu siri operasi permintaan ajax tak segerak akan dilakukan sebelum tindakan penyerahan, tetapi kod halaman js akan dilaksanakan mengikut urutan dari atas ke bawah . , jika anda melakukan operasi tak segerak semasa proses ini, anda tidak akan dapat mendapatkan hasil yang dikembalikan oleh operasi tak segerak semasa, dan js akan terus melaksanakan pernyataan seterusnya, jadi kami perlu menyegerakkan permintaan operasi untuk mendapatkan latar belakang kembalikan hasil data, dan kemudian tentukan sama ada keputusan itu konsisten sebelum melaksanakan penyataan seterusnya.

2. Penjelasan parameter $.ajax()

url:

Alamat untuk menghantar permintaan.

taip:

Kaedah permintaan (siar atau dapatkan) lalai untuk mendapatkan.

tamat masa:

memerlukan parameter jenis Nombor dan menetapkan tamat masa permintaan (milisaat).

async:

Tetapan lalai adalah benar, semua permintaan adalah permintaan tak segerak. Permintaan segerak, ditetapkan kepada palsu. Ambil perhatian bahawa permintaan segerak akan mengunci penyemak imbas, dan pengguna mesti menunggu permintaan itu selesai sebelum operasi lain boleh dilakukan. -----Ini adalah faktor tetapan yang paling penting untuk operasi penyegerakan

cache:

Lalai adalah benar Jika penyemak imbas mempunyai cache, data cache penyemak imbas akan diperolehi palsu tidak akan memperoleh data cache data:

Memerlukan parameter jenis Objek atau Rentetan, data dihantar ke pelayan. Jika ia bukan rentetan, ia akan ditukar secara automatik kepada format rentetan

Formula. Permintaan get akan dilampirkan pada url. Untuk mengelakkan penukaran automatik ini, semak pilihan processData. Objek mestilah dalam format kunci/nilai

Formula, contohnya, {foo1:"bar1",foo2:"bar2"} ditukar kepada &foo1=bar1&foo2=bar2. Jika ia adalah tatasusunan, JQuery secara automatik akan berbeza

Nilai sepadan dengan nama yang sama. Contohnya, {foo:["bar1","bar2"]} ditukar kepada &foo=bar1&foo=bar2.

dataType:

memerlukan parameter jenis String, jenis data yang dijangka akan dikembalikan oleh pelayan. Jika tidak dinyatakan, JQuery akan mengasaskan pakej http secara automatik pada mime

Maklumat mengembalikan responseXML atau responseText dan dihantar sebagai parameter fungsi panggil balik.

Jenis yang tersedia adalah seperti berikut:

xml: Mengembalikan dokumen XML yang boleh diproses dengan JQuery.

html: Mengembalikan maklumat HTML teks biasa; teg skrip yang disertakan akan dilaksanakan apabila dimasukkan ke dalam DOM.

Skrip

: Mengembalikan kod JavaScript teks biasa. Keputusan tidak dicache secara automatik. Melainkan parameter cache ditetapkan. Ambil perhatian bahawa apabila membuat permintaan jauh (bukan di bawah domain yang sama), semua permintaan siaran akan ditukar kepada permintaan dapatkan.

json: Mengembalikan data JSON.

jsonp: format JSONP. Apabila memanggil fungsi menggunakan borang SONP, seperti myurl?callback=?, JQuery akan menggantikan "?" yang terakhir dengan nama fungsi yang betul untuk melaksanakan fungsi panggil balik.

teks: Mengembalikan rentetan teks biasa.

sebelumHantar:

memerlukan parameter jenis Fungsi Anda boleh mengubah suai fungsi objek XMLHttpRequest sebelum menghantar permintaan, seperti menambah pengepala HTTP tersuai. Jika false dikembalikan dalam beforeSend, permintaan ajax ini boleh dibatalkan. Objek XMLHttpRequest ialah satu-satunya parameter.

Fungsi (XMLHttpRequest){ Ini; //Parameter pilihan diluluskan apabila memanggil permintaan ajax ini

            }

lengkap:

memerlukan parameter jenis Fungsi, fungsi panggil balik dipanggil selepas permintaan selesai (dipanggil apabila permintaan berjaya atau gagal). Parameter: objek XMLHttpRequest dan rentetan yang menerangkan jenis permintaan yang berjaya.

Fungsi (XMLHttpRequest, textStatus){ Ini; //Parameter pilihan diluluskan apabila memanggil permintaan ajax ini

          }

kejayaan:

memerlukan parameter jenis Fungsi Fungsi panggil balik yang dipanggil selepas permintaan berjaya mempunyai dua parameter.

(1) Data dikembalikan oleh pelayan dan diproses mengikut parameter dataType.

(2) Rentetan yang menerangkan status.

fungsi(data, textStatus){

//data mungkin xmlDoc, jsonObj, html, teks, dll. ini;

//Parameter pilihan diluluskan apabila memanggil permintaan ajax ini

ralat: memerlukan parameter jenis Fungsi, fungsi yang dipanggil apabila permintaan gagal. Fungsi ini mempunyai tiga parameter, iaitu objek XMLHttpRequest, mesej ralat, dan objek ralat yang ditangkap (pilihan).

Fungsi acara ajax adalah seperti berikut:

Fungsi

(XMLHttpRequest, textStatus, errorThrown){
//Biasanya, hanya satu textStatus dan errorThrown mengandungi maklumat
Ini; //Parameter pilihan diluluskan apabila memanggil permintaan ajax ini
}

contentType: memerlukan parameter jenis String Apabila menghantar maklumat ke pelayan, jenis pengekodan kandungan menjadi lalai kepada "application/x-www-form-urlencoded". Nilai lalai ini sesuai untuk kebanyakan aplikasi.

Penapis data: memerlukan parameter jenis Fungsi, fungsi yang mempraproses data asal yang dikembalikan oleh Ajax. Sediakan dua parameter: data dan jenis. data ialah data asal yang dikembalikan oleh Ajax, dan jenis ialah parameter dataType yang disediakan semasa memanggil jQuery.ajax. Nilai yang dikembalikan oleh fungsi akan diproses selanjutnya oleh jQuery.

fungsi(data, jenis){
//Kembalikan data yang diproses
                    mengembalikan data;
            }

global: diperlukan untuk menjadi parameter jenis Boolean dan lalainya adalah benar. Menunjukkan sama ada untuk mencetuskan acara ajax global. Menetapkan kepada false tidak akan mencetuskan acara ajax global, ajaxStart atau ajaxStop boleh digunakan untuk mengawal pelbagai acara ajax.

ifModified: memerlukan parameter jenis Boolean dan lalainya adalah palsu. Hanya dapatkan data baharu apabila data pelayan berubah. Asas untuk menentukan perubahan data pelayan ialah maklumat pengepala Terakhir Diubah Suai. Nilai lalai adalah palsu, yang bermaksud maklumat pengepala diabaikan.

jsonp: memerlukan parameter jenis String dan menulis semula nama fungsi panggil balik dalam permintaan jsonp. Nilai ini digunakan untuk menggantikan bahagian "panggilan balik" parameter URL dalam permintaan GET atau POST seperti "panggilan balik=?" Contohnya, {jsonp:'onJsonPLoad'} akan menyebabkan "onJsonPLoad=?" pelayan.

nama pengguna: diperlukan untuk menjadi parameter jenis Rentetan, digunakan untuk membalas nama pengguna permintaan pengesahan akses HTTP.

kata laluan: memerlukan parameter jenis String, iaitu kata laluan yang digunakan untuk membalas permintaan pengesahan akses HTTP.

processData: memerlukan parameter jenis Boolean dan lalainya adalah benar. Secara lalai, data yang dihantar akan ditukar kepada objek (bukan rentetan teknikal) untuk memadankan jenis kandungan lalai "application/x-www-form-urlencoded". Jika anda ingin menghantar maklumat pokok DOM atau maklumat lain yang anda tidak mahu tukar, sila tetapkannya kepada palsu.

scriptCharset: diperlukan untuk menjadi parameter jenis String Ia akan digunakan untuk memaksa set aksara (charset) diubah suai hanya apabila dataType ialah "jsonp" atau "skrip" semasa permintaan. , dan jenisnya ialah GET. Biasanya digunakan apabila pengekodan kandungan tempatan dan jauh berbeza.

3. tetapan penyegerakan $.getJson()

$.getJson() itu sendiri ialah kaedah operasi tak segerak dan perlu disediakan sebelum ia boleh disegerakkan

Tambah $.ajaxSettings.async = false; (pelaksanaan segerak) sebelum pelaksanaan Selepas melaksanakan kod anda, kembali ke $.ajaxSettings.async = benar dalam masa (pelaksanaan tak segerak) jika tidak, ia akan menjejaskan kod di tempat lain perlu dilaksanakan secara tidak segerak.

4. Contoh operasi khusus

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

Ringkasan:

$.ajax ialah pelaksanaan AJAX bagi kaedah get dan pos tradisional
$.getJSON ialah pelaksanaan AJAX kelas jsonp (bacaan data jauh)
Sebab mengapa ia dipanggil seperti AJAX ialah walaupun ia terkandung dalam kelas ajax jq, ia sebenarnya dilaksanakan melalui nod skrip

Perbezaan antara $.getJSON dan $.ajax ialah:

Apabila menghantar, $.getJSON akan menghantar nama fungsi panggil balik (jq akan memberikannya secara lalai)
Apabila menerima, fungsi panggil balik ini akan dipanggil
Bahagian pelayan $.getJSON mesti menambahkan nama fungsi panggil balik masuk sebelum data json
Oleh sebab itu, rentetan yang dikembalikan bukan lagi json (formatnya salah)
Oleh itu $.ajax dengan dataType: atribut "json" akan memasuki cawangan ralat

disebabkan ralat penghuraian json