萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> jquery對ajax的支持性

jquery對ajax的支持性

 本文為大家介紹下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(),   
copyright © 萬盛學電腦網 all rights reserved