$.ajax()用法例項程式碼介紹

antzone發表於2017-04-05

jQuery實現了對原生ajax功能的良好封裝,使用方便,無需考慮瀏覽器相容問題。

如果進行簡單的處理可以使用$.post、$.get即可實現,但是如果要精確設定的話最好還是要使用$.ajax()。

$.ajax的一般格式:

[JavaScript] 純文字檢視 複製程式碼
$.ajax({
   type: 'POST',
   url: url ,
  data: data ,
  success: success ,
  dataType: dataType
});

$.ajax的引數描述:

引數 描述

url:必需。規定把請求傳送到哪個 URL。

data:可選。對映或字串值。規定連同請求傳送到伺服器的資料。

success(data, textStatus, jqXHR) :可選。請求成功時執行的回撥函式。

dataType :可選。規定預期的伺服器響應的資料型別。

預設執行智慧判斷(xml、json、script 或 html)。

$.ajax需要注意的一些地方:

(1).data主要方式有三種,html拼接的,json陣列,form表單經serialize()序列化的;通過dataType指定,不指定智慧判斷。

(2).$.ajax只提交form以文字方式,如果非同步提交包含<file>上傳是傳過不過去,需要使用jquery.form.js的$.ajaxSubmit。

$.ajax實際應用例子:

(1).$.ajax帶json資料的非同步請求:

[JavaScript] 純文字檢視 複製程式碼
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序列化表格內容為字串的非同步請求:

[JavaScript] 純文字檢視 複製程式碼
function noTips(){  
  var formParam = $("#form1").serialize();//序列化表格內容為字串  
  $.ajax({  
    type:'post',    
    url:'Notice_noTipsNotice',  
    data:formParam,  
    cache:false,  
    dataType:'json',  
    success:function(data){  
    }  
  });  
}

(3).$.ajax拼接url的非同步請求:

[JavaScript] 純文字檢視 複製程式碼
var yz=$.ajax({  
  type:'post',  
  url:'validatePwd2_checkPwd2?password2='+password2,  
  data:{},  
  cache:false,  
  dataType:'json',  
  success:function(data){  
    //伺服器返回false,就將validatePassword2的值改為pwd2Error,這是非同步,需要考慮返回時間  
    if( data.msg =="false" ){  
      textPassword2.html("<font color='red'>業務密碼不正確!</font>");  
      $("#validatePassword2").val("pwd2Error");  
      checkPassword2 = false;  
      return;  
    }  
  },  
  error:function(){}  
});

(4).$.ajax拼接data的非同步請求:

[JavaScript] 純文字檢視 複製程式碼
$.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);   
  } 
});

相關文章