jQuery Ajax() panduan penggunaan kaedah

jQuery Ajax() panduan penggunaan kaedah_jquery

WBOY

Lepaskan： 2016-05-16 16:30:54

asal

1533 orang telah melayarinya

jQuery menyediakan fungsi pemilih yang mudah dan berkuasa, dan juga menyediakan sokongan yang baik untuk operasi Ajax. Dari segi Ajax, selain menyediakan kaedah jQuery.ajax() yang mendasari, jQuery juga menyediakan kaedah mudah berikut:

(1) jQuery.get(url, [data], [panggilan balik], [jenis])

(2) jQuery.getJSON(url, [data], [panggilan balik])

(3) jQuery.getScript(url, [panggilan balik])

(4) jQuery.post(url, [data], [panggilan balik], [jenis])

Memandangkan jQuery.ajax() agak berkuasa dan mempunyai banyak parameter boleh dikonfigurasikan, kami kini akan meringkaskan langkah berjaga-jaga untuk kaedah ini.

1. jQuery.ajax() diminta secara tidak segerak secara lalai Jika penyegerakan diperlukan, gunakan parameter async kepada false. Kerana sesetengah aplikasi mesti meminta data secara serentak. Contohnya, dalam sesetengah aplikasi interaktif Flash dan JS, meminta fungsi JS memerlukan data pemulangan segera. Pada masa ini, panggilan Ajax segerak mesti digunakan.

2. Jika Ajax ialah permintaan Dapatkan, data yang dikembalikan biasanya akan dicache oleh penyemak imbas Jika anda tidak mahu dicache, anda boleh menetapkan parameter cache kepada palsu atau menghantar permintaan dengan cap waktu bahawa penyemak imbas akan menganggap ia adalah permintaan baharu semasa memuatkan semula data daripada pelayan. Sudah tentu, jika permintaan dihantar melalui POST, ia tidak akan dicache.

3. DataType: Jenis data yang dijangka akan dikembalikan oleh pelayan. Jika tidak dinyatakan, jQuery akan secara automatik mengembalikan responseXML atau responseText berdasarkan maklumat MIME paket HTTP dan menghantarnya sebagai parameter fungsi panggil balik Nilai yang tersedia:

(1) "xml": Mengembalikan dokumen XML yang boleh diproses dengan jQuery.

(2) "html": Mengembalikan maklumat HTML teks biasa; teg skrip yang disertakan akan dilaksanakan apabila dimasukkan ke dalam dom.

(3) "skrip": Mengembalikan kod JavaScript teks biasa. Keputusan tidak dicache secara automatik. Melainkan parameter "cache" ditetapkan. '''Nota:''''Apabila membuat permintaan jauh (bukan di bawah domain yang sama), semua permintaan POST akan ditukar kepada permintaan GET. (Kerana teg skrip DOM akan digunakan untuk memuatkan)

(4) "json": Kembalikan data JSON.

(5) "jsonp": format JSONP. Apabila memanggil fungsi menggunakan format JSONP, seperti "myurl?callback=?" secara automatik akan menggantikan ?

(6) "teks": Mengembalikan rentetan teks biasa

Antaranya, tetapan "skrip" dan "json" boleh menyelesaikan masalah merentas domain Ajax.

4. Jika pelayan mengembalikan rentetan atau nilai berangka, hanya gunakan panggilan ajax biasa.

Jika pelayan mengembalikan objek JSON, sebaiknya gunakan jQuery.getJSON atau tetapkan dataType=json. Oleh kerana penyemak imbas mengambil masa untuk menghuraikan objek JSON, mengembalikan objek JSON secara langsung menjimatkan masa penghuraian dan mengelakkan ralat di mana pelayan jelas mengembalikan data tetapi penyemak imbas tidak dapat mendapatkannya.

5. Panggilan Ajax mengambil masa, jadi secara amnya semua kod pemprosesan selepas panggilan Ajax diletakkan dalam kaedah panggil balik. Pendekatan ini tidak boleh digunakan:

Salin kod Kod adalah seperti berikut:

fungsi getMyPrizeList(){

    if(isNotEmpty(uid)){

        var obj=Objek baharu();

        cuba{

          jQuery.ajax({type:"GET",url:"someurl",async:false,cache:false,dataType:"script",scriptCharset:"gbk",success:function(json){

                     obj=json;

                  }

              });

           }tangkap(e){}

           obj=eval("(" obj ")");

           //alert(obj);

           var str="";

           untuk(var i dalam obj)

           {

               str ='' '' prizearray[obj[i].prizeno] ''

               str ='' 'CD-KEY：' obj[i].cdkey ''

               str ='' '期限：' obj[i].tamat tempoh '前' '';

           }

           jQuery("#hadiah").append(str);

        }

}

而必须这样处理：即将处理代码放到success函数里面！

复制代码代码如下:

fungsi getMyPrizeList(){

    if(isNotEmpty(uid)){

        var obj=New Array();

        cuba{

                  jQuery.ajax({type:"GET",url:"someurl",

                               cache:false,

                               dataType:"skrip",

                               scriptCharset:"gbk",

                               success:function(json){

                                 cuba{

                                      obj=hasil;  

                                }tangkap(e){}

                                jQuery("#hadiah").html("");

                                var str="";

                                untuk(var i=0;i
                                    str ='' prizearray[obj[i].prizeno] '';

                                    str ='CD-KEY：' obj[i].cdkey '';

                                    str ='期限：' obj[i].tamat tempoh '前';

                                }

                                jQuery("#hadiah").append(str);                   

                               }

                   });

           }tangkap(e){}

        }

}

6. jQuery.getJSON实例：

复制代码代码如下:

//Fungsi dalaman untuk memuatkan butiran penghutang dan menetapkan nilai

Fungsi innerShowDetail() {

// Dapatkan data dalam format JSON

         $.getJSON('load.do',{id : userId}, function(json) {

// Tetapkan nilai
 berdasarkan kunci
untuk (kunci masuk json) {

Jika(kunci == 'id'){

                           $('#detailDiv #' key).val(json[key]);

                 } lain {

If(json[key] == ''){

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          // Tiada nilai ditetapkan kepada kosong 

                                $('#detailDiv #' key).html(' ');

                            } jika tidak (kunci == 'jantina'){

                           $('#detailDiv #' key).html(json[key] == '0' ? 'Wanita' : 'Lelaki');

                            } jika tidak (kunci == 'kumpulan'){

If(json[key] != null) {

$('#detailDiv #' key).html(json[key]['groupName']);

                    }

                      } lain {

$('#detailDiv #' key).html(json[key]);

                 }

               }

           }

//Tetapkan tajuk dialog dan kandungan

               $('#detailDiv').removeAttr('class');

Dialog.setTitle('Lihat orang[' json['Nama pengguna'] '] butiran');

Dialog.setContent($('#detailDiv').html());

});

}