Bercakap tentang perincian penggunaan jQuery Ajax_jquery

Definisi dan penggunaan

Kaedah ajax() memuatkan data jauh melalui permintaan HTTP.

Kaedah ini ialah pelaksanaan AJAX yang mendasari jQuery. Untuk pelaksanaan peringkat tinggi yang ringkas dan mudah digunakan, lihat $.get, $.post, dsb. $.ajax() mengembalikan objek XMLHttpRequest yang diciptanya. Dalam kebanyakan kes, anda tidak perlu memanipulasi fungsi ini secara langsung melainkan anda perlu memanipulasi pilihan yang kurang biasa digunakan untuk lebih fleksibiliti.

Dalam kes paling mudah, $.ajax() boleh digunakan secara langsung tanpa sebarang parameter.

Nota: Semua pilihan boleh ditetapkan secara global melalui fungsi $.ajaxSetup().

jQuery Ajax sangat biasa digunakan dalam pembangunan aplikasi web Ia terutamanya termasuk kaedah operasi tanpa muat semula biasa seperti ajax, get, post, load, getscript, dll. Biar saya memperkenalkannya kepada anda.

Mari mulakan dengan kaedah paling mudah Apabila memproses permintaan ajax yang kompleks, jQuery menggunakan kaedah jQuery.ajax(). Terdapat beberapa kaedah mudah dalam jQuery, yang merangkumi kaedah jQuery.ajax(), supaya kita tidak perlu menggunakan kaedah jQuery.ajax() apabila mengendalikan beberapa peristiwa Ajax yang mudah Beberapa kaedah ini terdapat dalam artikel sebelumnya telah pun muncul, saya percaya semua orang akan dapat menguasainya tidak lama lagi. Sudah tentu, kaedah jQuery.ajax() akan diterangkan dengan sangat khusus dalam separuh kedua artikel ini, kerana ia adalah keutamaan utama artikel ini.

5 kaedah berikut melaksanakan bentuk ringkas permintaan Ajax umum jQuery.ajax() harus digunakan semasa mengendalikan permintaan Ajax yang kompleks.

1.load(url,[data],[panggilan balik])

Muat kod fail HTML jauh dan masukkan ke dalam DOM Kaedah GET digunakan secara lalai, dan ia secara automatik ditukar kepada kaedah POST apabila menghantar parameter.

◦url: alamat url jauh untuk dimuatkan
◦data: data kunci/nilai dihantar ke pelayan
◦panggilan balik: fungsi panggil balik apabila dimuatkan berjaya

Kod sampel adalah seperti berikut:

//无参数、无回调函数
$("#showload").load("load.htm");
//无回调函数
$("#showload").load("load.htm", { "para": "para-value" });
$("#showload").load("load.htm", { "para": "para-value" },
 function() {
  //处理
 })

Kandungan fail yang dimuatkan akan dipaparkan di sini Muatkan

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

Gunakan kaedah dapatkan untuk mendapatkan data daripada pelayan.

◦ Alamat URL untuk menghantar permintaan
◦Data untuk dihantar ke pelayan
◦Fungsi panggil balik apabila pemuatan berjaya

Kod sampel adalah seperti berikut:

$.get("jqueryget.htm", { "id": this.id },
 function(req) {
  //成功时的回调方法
  $("#showget").html(req);
 });
})

Gunakan kaedah $.get() untuk mendapatkan logo berbeza dengan menghantar id. Perlu dinyatakan bahawa permintaan diperoleh melalui kaedah dapatkan pada masa ini, jadi Request.QueryString mesti digunakan semasa mendapatkan nilai parameter Anda boleh melihat perbezaan antara Request Request.QueryString

Logo Baidu Logo Google

logo3.jQuery.post(url, [data], [panggilan balik])
akan dipaparkan di sini Gunakan kaedah POST untuk membuat permintaan tak segerak. Berbanding dengan jQuery.get(), perbezaannya terletak pada kaedah permintaan, jadi tiada penjelasan khas di sini Kaedah penggunaan adalah serupa dengan jQuery.get().

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

Permintaan untuk memuatkan dan melaksanakan fail JavaScript melalui kaedah GET. Teknologi ini telah disebutkan dalam artikel sebelumnya, dan ia juga merupakan cara mudah untuk menggunakan jQuery.ajax Anda boleh melihat ajax memuatkan js, jadi tiada penjelasan khas di sini.

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

Dapatkan data dalam format json melalui kaedah get.

Kod sampel adalah seperti berikut:

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(req) {
 $.each(req.items, function(i, item) {
  if (i == vnum) {
   $("<img src="" + item.media.m + "" title="" + item.title + "" />").appendTo("#showjson");
  }
 });
});

Begitu juga, ini juga merupakan kaedah ringkas untuk kaedah jQuery.ajax(), serupa dengan kaedah berikut:

Senarai parameter:

Nama parameter	Taip	Penerangan
url	Rentetan	(Lalai: alamat halaman semasa) Alamat untuk menghantar permintaan.
taip	Rentetan	(Lalai: "GET") Kaedah permintaan ("POST" atau "GET"), lalai ialah "GET". Nota: Kaedah permintaan HTTP lain seperti PUT dan DELETE juga boleh digunakan, tetapi hanya disokong oleh sesetengah penyemak imbas.
masa tamat	Nombor	Tetapkan tamat masa permintaan (milisaat). Tetapan ini mengatasi tetapan global.
tak segerak	Boolean	(Lalai: benar) Secara lalai, semua permintaan adalah permintaan tak segerak. Jika anda perlu menghantar permintaan segerak, tetapkan pilihan ini kepada palsu. Ambil perhatian bahawa permintaan segerak akan mengunci penyemak imbas, dan pengguna mesti menunggu permintaan itu selesai sebelum operasi lain boleh dilakukan.
sebelum Hantar	Fungsi	Fungsi objek XMLHttpRequest boleh diubah suai sebelum menghantar permintaan, seperti menambah pengepala HTTP tersuai. Objek XMLHttpRequest ialah satu-satunya parameter. <span style="color: rgb(0,0,255)">function (XMLHttpRequest) { <span style="color: rgb(0,0,255)">this; <span style="color: rgb(0,128,0)">// the options for this ajax <a target="_blank" style="color: rgb(51,153,255); text-decoration: none" href="http://www.php100.com/tags.php/request/">request</a>}</span></span></span>
cache	Boolean	(默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。
complete	Function	请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象，成功信息字符串。 <span style="color: rgb(0,0,255)">function (XMLHttpRequest, textStatus) { <span style="color: rgb(0,0,255)">this; <span style="color: rgb(0,128,0)">// the options for this ajax request}</span></span></span>
contentType	String	(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
data	Object, Rentetan	Data dihantar ke pelayan. Akan ditukar secara automatik kepada format rentetan permintaan. Dilampirkan pada URL dalam permintaan GET. Lihat perihalan pilihan processData untuk melumpuhkan penukaran automatik ini. Mesti dalam format Kunci/Nilai. Jika ia adalah tatasusunan, jQuery secara automatik akan memberikan nama yang sama kepada nilai yang berbeza. Contohnya, {foo:["bar1", "bar2"]} ditukar kepada '&foo=bar1&foo=bar2'.
dataType	Rentetan	Jenis data dijangka 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: "xml": Mengembalikan dokumen XML yang boleh diproses dengan jQuery. "html": Mengembalikan maklumat HTML teks biasa mengandungi elemen skrip. "skrip": Mengembalikan kod JavaScript teks biasa. Keputusan tidak dicache secara automatik. "json": Mengembalikan data JSON. "jsonp": format JSONP. Apabila memanggil fungsi menggunakan format JSONP, seperti "myurl?callback=?"jQuery akan secara automatik menggantikan ?
ralat	Fungsi	(Lalai: Tentukan secara automatik (xml atau html)) Kaedah ini akan dipanggil apabila permintaan gagal. Kaedah ini mengambil tiga parameter: objek XMLHttpRequest, mesej ralat dan (mungkin) objek ralat yang ditangkap. <span style="color: rgb(0,0,255)">function (XMLHttpRequest, textStatus, errorThrown) { <span style="color: rgb(0,128,0)">// 通常情况下textStatus和errorThown只有其中一个有值 <span style="color: rgb(0,0,255)">this; <span style="color: rgb(0,128,0)">// the options for this ajax request}</span></span></span></span>
global	Boolean	(默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
ifModified	Boolean	(默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。
processData	Boolean	(默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
success	Function	请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态 <span style="color: rgb(0,0,255)">function (data, textStatus) { <span style="color: rgb(0,128,0)">// data could be xmlDoc, jsonObj, html, text, etc... <span style="color: rgb(0,0,255)">this; <span style="color: rgb(0,128,0)">// the options for this ajax request}</span></span></span></span>

这里有几个Ajax事件参数：beforeSend ，success ，complete ，error 。我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。注意一下，这些Ajax事件里面的 this 都是指向Ajax请求的选项信息的(请参考说 get() 方法时的this的图片)。

代码如下

$.ajax({
 url: url,
 dataType: 'json',
 data: data,
 success: callback
});

可能你还没有使用过json数据，我的小站中已经好几次提到了json的使用，如果你还不熟悉json格式，可以看看jquery移动listbox的值、jQuery下json的使用实例

获得json数据

这 里将随机显示一条json数据到目前为止我们总结了jQuery.ajax的五种简写方法，接下来让我们集中精神，看看jQuery.ajax()方法， 在使用中，笔者也是经常使用的jQuery.ajax()，因为大多数情况，我们需要对ajax请求出错的情况进行捕捉并处理。

6.jQuery.ajax()

使用jQuery.ajax()方法获取数据，下边给个常用写法，并做了相应的注释。

代码如下

$.ajax({
 url: "http://www.hzhuti.com", //请求的url地址
 dataType: "json", //返回格式为json
 async: true, //请求是否异步，默认为异步，这也是ajax重要特性
 data: { "id": "value" }, //参数值
 type: "GET", //请求方式
 beforeSend: function() {
  //请求前的处理
 },
 success: function(req) {
  //请求成功时处理
 },
 complete: function() {
  //请求完成的处理
 },
 error: function() {
  //请求出错处理
 }
});

使用jQuery.ajax()

这里将显示数据

$.ajax我的实际应用例子

//1.$.ajax带json数据的异步请求
var aj = $.ajax( { 
 url:'productManager_reverseUpdate',// 跳转到 action 
 data:{ 
    selRollBack : selRollBack, 
    selOperatorsCode : selOperatorsCode, 
    PROVINCECODE : PROVINCECODE, 
    pass2 : pass2 
 }, 
 type:'post', 
 cache:false, 
 dataType:'json', 
 success:function(data) { 
  if(data.msg =="true" ){ 
   // view("修改成功！"); 
   alert("修改成功！"); 
   window.location.reload(); 
  }else{ 
   view(data.msg); 
  } 
  }, 
  error : function() { 
   // view("异常！"); 
   alert("异常！"); 
  } 
});

//2.$.ajax序列化表格内容为字符串的异步请求
function noTips(){ 
 var formParam = $("#form1").serialize();//序列化表格内容为字符串 
 $.ajax({ 
  type:'post',  
  url:'Notice_noTipsNotice', 
  data:formParam, 
  cache:false, 
  dataType:'json', 
  success:function(data){ 
  } 
 }); 
} 
//3.$.ajax拼接url的异步请求
var yz=$.ajax({ 
  type:'post', 
  url:'validatePwd2_checkPwd2?password2='+password2, 
  data:{}, 
  cache:false, 
  dataType:'json', 
  success:function(data){ 
   if( data.msg =="false" ) //服务器返回false，就将validatePassword2的值改为pwd2Error，这是异步，需要考虑返回时间 
   { 
    textPassword2.html("<font color='red'>业务密码不正确！</font>"); 
    $("#validatePassword2").val("pwd2Error"); 
    checkPassword2 = false; 
    return; 
   } 
  }, 
  error:function(){} 
});
//4.$.ajax拼接data的异步请求
$.ajax({ 
 url:'<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action', 
 type:'post', 
 data:'merName='+values, 
 async : false, //默认为true 异步 
 error:function(){ 
  alert('error'); 
 }, 
 success:function(data){ 
  $("#"+divs).html(data); 
 }
});

本篇的jQuery ajax使用就总结到这里，当然还有一些方法并未能全部的总结。如ajaxStart()、ajaxStop()等，在以后使用中，我会把它们也总结下来。