5 JQuery.ajax () Contoh JQuery 1.9

Ringkasan mata utama

Penggunaan fungsi JQuery.ajax () telah berkembang dalam versi terkini. dan kaedah yang lengkap ().
Artikel ini menyediakan lima contoh penggunaan jQuery.ajax (). Contoh 1 menunjukkan permintaan AJAX asas untuk melanggan surat berita, sementara Contoh 2 menunjukkan cara mengendalikan kesilapan dan tamat untuk permintaan AJAX.
Contoh 3 menggambarkan cara menggunakan fungsi datafilter untuk memproses data mentah yang dikembalikan oleh permintaan AJAX, sementara Contoh 4 membincangkan menentukan jenis header respons kandungan yang tersedia pada xmlhttprequest.
Contoh terakhir, Contoh 5, menerangkan bagaimana untuk menghuraikan data XML yang dikembalikan dari skrip, menekankan pentingnya menentukan pilihan datatype $ .ajax dan memastikan pelayan menghantar kandungan dengan jenis mime yang sesuai.

memasuki 2013 ... cara kami menggunakan fungsi jQuery.ajax () telah berubah dalam versi terkini. Dengan ini, dan contoh -contoh yang lebih tua sedikit ketinggalan zaman, saya menulis 5 contoh baru JQuery.ajax () (jQuery 1.9) untuk menunjukkan cara menggunakan Ajax dengan versi baru JQuery 1.9.x dan 2.0. Kaedah baru mempunyai beberapa kelebihan berbanding kaedah lama.

Saya akan cuba menyimpan siaran ini dengan coretan kod AJAX untuk rujukan. Seperti biasa, komen dialu -alukan.

Beberapa peringatan cepat untuk pelajar: - Kaedah .done () menggantikan kaedah JQXHR.SUCCESS () yang telah ditetapkan. - Kaedah .fail () menggantikan kaedah .error () yang tidak disengajakan. - Kaedah. Always () menggantikan kaedah yang tidak lengkap ().

jQuery 1.9 AJAX Contoh 1 - Langgan Surat Berita

Contoh ini menunjukkan permintaan Ajax asas untuk melanggan surat berita untuk menghantar nama dan e -mel ke skrip backend.

var subscribeRequest = $.ajax({
     type: "POST",
     url: "subscribe.php",
     data: { subscriberName: $('#name').val(), emailAddress: $('#email').val() }
});

subscribeRequest.done(function(msg) {
     alert( "您已成功订阅我们的邮件列表。" );
});

subscribeRequest.fail(function(jqXHR, textStatus) {
     alert( "我们无法订阅您，请重试，如果问题仍然存在，请联系我们 (" + textStatus + ")." );
});

jQuery 1.9 AJAX Contoh 2 - Timeout Permintaan

Contoh ini menunjukkan bagaimana untuk menangkap kesilapan dan kegagalan, seperti waktu tamat untuk permintaan Ajax. & gt; menetapkan masa tamat dalam milisaat untuk permintaan itu. Masa tamat bermula apabila panggilan $ .jax dikeluarkan; Dalam Firefox 3.0 sahaja, Skrip dan Permintaan JSONP tidak dapat dibatalkan oleh masa tamat;

var newDataRequest = $.ajax({
     url: "getNewData.php",
     timeout: 30000, // 30 秒后超时
     data: { timestamp: new Date().getTime() }
});

newDataRequest.done(function(data) {
     console.log(data);
});

newDataRequest.fail(function(jqXHR, textStatus) {
    if (jqXHR.status === 0) {
        alert('未连接。请验证网络。');
    } else if (jqXHR.status == 404) {
        alert('请求的页面未找到。[404]');
    } else if (jqXHR.status == 500) {
        alert('内部服务器错误 [500]。');
    } else if (exception === 'parsererror') {
        alert('请求的 JSON 解析失败。');
    } else if (exception === 'timeout') {
        alert('超时错误。');
    } else if (exception === 'abort') {
        alert('Ajax 请求已中止。');
    } else {
        alert('未捕获的错误。\n' + jqXHR.responseText);
    }
});

jQuery 1.9 AJAX Contoh 3 - Datafilter

Contoh ini menunjukkan cara menggunakan fungsi datafilter untuk memproses data mentah yang dikembalikan oleh permintaan AJAX.

var filterDataRequest = $.ajax({
     url: "getData.php",
     dataFilter: function (data, type) {
          // 在此处包含任何过滤数据的条件……
          // 一些示例如下……

          // 示例 1 - 从返回的数据中删除所有逗号
          return data.replace(",", "");

          // 示例 2 - 如果数据是 json，则以某种方式处理它
          if (type === 'json') {
              var parsed_data = JSON.parse(data);
              $.each(parsed_data, function(i, item) {
                  // 处理 json 数据
              });
              return JSON.stringify(parsed_data);
          }

     }
});

filterDataRequest.done(function(data) {
     console.log(data);
});

filterDataRequest.fail(function(jqXHR, textStatus) {
     console.log( "Ajax 请求失败... (" + textStatus + ' - ' + jqXHR.responseText + ")." );
});

jQuery 1.9 AJAX Contoh 4 - Jenis MIME

Contoh ini menunjukkan cara menentukan jenis header respons kandungan yang tersedia pada XMLHTTPREQUEST. Jika anda secara jelas lulus jenis kandungan ke $ .ajax (), ia akan sentiasa dihantar ke pelayan (walaupun tiada data dihantar). Jika set aksara tidak ditentukan, data akan dipindahkan ke pelayan menggunakan set aksara lalai pelayan;

var subscribeRequest = $.ajax({
     type: "POST",
     url: "subscribe.php",
     data: { subscriberName: $('#name').val(), emailAddress: $('#email').val() }
});

subscribeRequest.done(function(msg) {
     alert( "您已成功订阅我们的邮件列表。" );
});

subscribeRequest.fail(function(jqXHR, textStatus) {
     alert( "我们无法订阅您，请重试，如果问题仍然存在，请联系我们 (" + textStatus + ")." );
});

jQuery 1.9 AJAX Contoh 5 - Parsing XML

Contoh ini diambil dari dokumen jQuery "Tentukan jenis data untuk permintaan AJAX". Ia menunjukkan pemuatan dan parsing XML yang dikembalikan dari skrip ke XML (jika Internet Explorer diterima sebagai teks biasa dan bukannya teks/XML). Dengan menyatakan pilihan datatype $ .ajax sebagai "XML", pastikan pelayan anda menghantar kandungan dengan jenis "teks/XML" MIME. Menghantar jenis mime yang salah akan menghalang jQuery daripada menguruskan data yang dikembalikan dengan betul dalam respons dan boleh menyebabkan masalah yang tidak dijangka dalam skrip.

var newDataRequest = $.ajax({
     url: "getNewData.php",
     timeout: 30000, // 30 秒后超时
     data: { timestamp: new Date().getTime() }
});

newDataRequest.done(function(data) {
     console.log(data);
});

newDataRequest.fail(function(jqXHR, textStatus) {
    if (jqXHR.status === 0) {
        alert('未连接。请验证网络。');
    } else if (jqXHR.status == 404) {
        alert('请求的页面未找到。[404]');
    } else if (jqXHR.status == 500) {
        alert('内部服务器错误 [500]。');
    } else if (exception === 'parsererror') {
        alert('请求的 JSON 解析失败。');
    } else if (exception === 'timeout') {
        alert('超时错误。');
    } else if (exception === 'abort') {
        alert('Ajax 请求已中止。');
    } else {
        alert('未捕获的错误。\n' + jqXHR.responseText);
    }
});

(seksyen Soalan Lazim mengenai jQuery Ajax harus terus ditambah di sini, kandungannya konsisten dengan teks input)

Perhatikan bahawa saya tidak menyalinnya sepenuhnya ke output kerana bahagian FAQ teks input terlalu panjang. Anda boleh menambah bahagian FAQ teks input terus ke hujung output seperti yang diperlukan.

Atas ialah kandungan terperinci 5 JQuery.ajax () Contoh JQuery 1.9. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!