jquery對ajax的支援性

來源:互聯網
上載者:User

 本文為大家介紹下jquery對ajax的支援性,感興趣的朋友可以瞭解下

1.三個方法  1.1.load方法  //作用:將伺服器返回的資料直接添加到符合要求的dom對象上 //相當於 obj.innerHTML = 伺服器返回的資料  用法: $obj.load(url,[請求參數]);  url : 請求地址 請求參數 : 第一種形式:請求字串,比如: 'username=zs&age=22' 第二種形式:對象,比如 {'username':'zs','age':22}  //注意: //a, load方法如果沒有參數,會使用get方式發請求。如果有參數,會使用post方式發請求。 //b, 如果有中文參數值,load方法已經幫我們做了編碼處理。  例子:  代碼如下:$(function(){ $('a.s1').toggle(function(){ var airline = $(this).parent().siblings().eq(0).text(); $(this).next().load('priceInfo.do','airline=' + airline); $(this).html('顯示經濟艙價格'); },function(){ $(this).next().empty(); $(this).html('顯示所有票價'); }); });   1.2.$.get()和$.post()方法  //作用:向伺服器發送get或者post請求 (get請求ie有緩衝問題)  用法: $.get(url,[data],[callback],[type]); $.post(url,[data],[callback],[type]);  url : 請求地址 data : 請求參數,形式同上。 callback : 回呼函數,可以通過該函數來處理伺服器返回的資料。 callback格式:  function(data,statusText),  其中,data可以獲得伺服器返回的資料, statusText是一個簡單的字串,描述伺服器處理的狀態。  type : 伺服器返回的資料類型,類型可以是: html : 返回的是html內容。 text : 返回的是text。 json : 返回的是json字串 xml : 返回的是dom相容的xml對象 script: 返回的javascriptz  例子: 複製代碼 代碼如下:function quoto(){ $.post('quoto.do',function(data){ //如果伺服器返回的資料是json字串, //會自動轉換成js對象或者json對象組成的數組。 $('#tb1').empty(); for(i=0;i<data.length;i++){ $('#tb1').append( '<tr><td>' + data[i].code + '</td><td>' + data[i].name + '</td><td>' + data[i].price + '</td></tr>'); } },'json');t }  1.3.$.ajax(options):  //options是一個形如{key1:value1,key2:value2...}的js對象,用於指定發送請求的選項。  選項參數如下:  url(string) : //請求地址 type(string) : //GET/POST data(object/string) : //發送到伺服器的資料 dataType(string) : //預期伺服器返回的資料類型 success(function) : //請求成功後調用的回呼函數,有兩個參數: function(data,textStatus), 其中,data是伺服器返回的資料, textStatus 描述狀態的字串。 error(function) : //請求失敗時調用的函數,有三個參數 function(xhr,textStatus,errorThrown), 其中xhr是底層的ajax對象(XMLHttpRequest), textStatus,errorThrown這兩個參數其中的 一個可以獲得底層的異常描述。 async:true(預設)/false : //當值為false時,發送同步請求。  例子: 複製代碼 代碼如下:$(function(){ $('#s1').change(function(){  $.ajax({ 'url':'carInfo.do', 'type':'post', 'data':'carName='+$('#s1').val(), 'dataType':'xml', 'success':function(data){ //data是伺服器返回的資料 //如果返回的是xml文檔,我們需要使用 //$函數將其封裝$(data)成一個jQuery //對象,方便尋找。 //追加之前先清空 $('#tb1').empty(); $('#tb1').append( '<tr><td>製造商:' + $(data).find('company').text() +' 價格:' + $(data).find('price').text() +' </td><td>車身大小:' + $(data).find('size').text() + ' 門數:' + $(data).find('door').text() + '</td><td>排量: ' + $(data).find('vol').text() + ' 加速效能:' + $(data).find('speed').text() + '</td></tr>'); //要將表格顯示出來 $('#tips').slideDown('slow'); setTimeout(function(){ $('#tips').fadeOut('slow'); },2000); }, 'error':function(){ $('#tb1').append( "<tr><td colspan='3'>該車型資訊暫時不可用</td></tr>"); $('#tips').slideDown('slow'); } }); }); });  例子2: 解決中文亂碼問題: 複製代碼 代碼如下:$.ajax({ 'url':'netctoss7/ajaxCode', 'type':'post', 'data':{name:value}, 'dataType':'json', 'async':false, 'success':function(data){ if(data){ $('#msg_verCode').text(''); v1=true; }else{ $('#msg_verCode').text('驗證碼錯誤'); } } });   2.兩個輔助性的方法  2.1.serialize():  //將jquery對象包含的表單或者表單控制項轉換成查詢字串。  2.2.serializeArray():  //轉換為一個數組,每個數組元素形如{name:fieldName,value:fieldVal}的對象。 //序列化元素的作用,主要是用於ajax請求中,給data賦值。  說明: 只能用於表單或者表單控制項 直接把表單的name和對應的value值發送出去,形如:name=value  例子: 複製代碼 代碼如下:$.ajax({})中 //'data':'carName='+$('#s1').val(), 'data':$('#s1').serialize(),  //'data':{'carName':$('#s1').val()}, 'data':$('#s1').serializeArray(),  
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.