jQuery.get()方法:
$.get(url,data,success(response,status,xhr),dataType)
該函數是簡寫的 Ajax 函數,等價於:
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
根據響應的不同的 MIME 類型,傳遞給 success 回調函數的返回數據也有所不同,這些數據可以是 XML root 元素、文本字符串、JavaScript 文件或者 JSON 對象。也可向 success 回調函數傳遞響應的文本狀態。
參數 | 描述 |
---|---|
url | 必需。規定將請求發送的哪個 URL。 |
data | 可選。規定連同請求發送到服務器的數據。 |
success(response,status,xhr) | 可選。規定當請求成功時運行的函數。 額外的參數:
|
dataType | 可選。規定預計的服務器響應的數據類型。 默認地,jQuery 將智能判斷。 可能的類型:
|
使用 AJAX 的 GET 請求來改變 div 元素的文本:
$("button").click(function(){ $.get("demo_ajax_load.txt", function(result){ $("div").html(result); }); });
jQuery.post()方法:
$.post(url,data,success(data, textStatus, jqXHR),dataType)
該函數是簡寫的 Ajax 函數,等價於:
$.ajax({ type: 'POST', url: url, data: data, success: success, dataType: dataType });
根據響應的不同的 MIME 類型,傳遞給 success 回調函數的返回數據也有所不同,這些數據可以是 XML 根元素、文本字符串、JavaScript 文件或者 JSON 對象。也可向 success 回調函數傳遞響應的文本狀態。
參數 | 描述 |
---|---|
url | 必需。規定把請求發送到哪個 URL。 |
data | 可選。映射或字符串值。規定連同請求發送到服務器的數據。 |
success(data, textStatus, jqXHR) | 可選。請求成功時執行的回調函數。 |
dataType | 可選。規定預期的服務器響應的數據類型。 默認執行智能判斷(xml、json、script 或 html)。 |
使用 AJAX 的 GET 請求來改變 div 元素的文本:
$("input").keyup(function(){ txt=$("input").val(); $.post("demo_ajax_gethint.asp",{suggest:txt},function(result){ $("span").html(result); }); });
實例:
一個簡單的 POST 請求功能以取代復雜 $.ajax 。請求成功時可調用回調函數。如果需要在出錯時執行函數,請使用 $.ajax。示例代碼:
Ajax.aspx:
Response.ContentType = "application/json";Response.Write("{result: '" + Request["Name"] + ",你好!(這消息來自服務器)'}");
jQuery 代碼:
$.post("Ajax.aspx", { Action: "post", Name: "lulu" }, function (data, textStatus){ // data 可以是 xmlDoc, jsonObj, html, text, 等等. //this; // 這個Ajax請求的選項配置信息,請參考jQuery.get()說到的this alert(data.result);
}, "json");
點擊提交:
這里設置了請求的格式為"json":
$.ajax()這個是jQuery 的底層 AJAX 實現。簡單易用的高層實現見 $.get, $.post 等。
這里有幾個Ajax事件參數:beforeSend ,success ,complete ,error 。我們可以定義這些事件來很好的處理我們的每一次的Ajax請求。
$.ajax({ url: 'stat.php', type: 'POST', data:{Name:"keyun"}, dataType: 'html', timeout: 1000, error: function(){alert('Error loading PHP document');}, success: function(result){alert(result);} });
$.get()與$.post()的區別:
《計算機網絡》對POST和GET方法在HTTP協議中的簡單解釋:HTTP協議定義了通信的兩種報文:請求報文和響應報文。對於請求報文來說,它的通用格式包含三個主要部分:請求行、首部行、實體主體。通常請求行的格式為:方法字段 、 URL字段、 HTTP協議版本字段,其中方法字段就包括GET、POST方法等。
當方法字段是GET方法時內容主體為空,而是用POST方法時才使用實體主體。
HTTP客戶機通常在用戶提交表單時使用POST方法,這時,實體主體中所包含的就是用戶在表單中的輸入值。當然,GET方法也可以提交表單中的數據,它是通過將用戶在表單中的輸入值傳送到正確的URL來實現的。這就是我們通常所看到的http://ei.hust.edu.cn?username="libis"&age=12。
可以看出,在表單提交的方式上兩者存在很大的不同:
- Post方法將表單數據填充到HTTP請求報文中的實體主體部分,使用者是看不到的。而GET方法則是將表單數據直接傳送到請求行的URL字段來實現表單數據提交的。這也就決定了使用POST是相對比較安全的,而是用GET方法的安全性就很低。
除此之外,GET方法和POST方法另一個重要的區別是:
- GET方法傳送的數據量較小,一般只有2k。而POST方法傳送的數據量較大,理論上沒有上限。
$.ajax()需要注意的一些地方:
1.data主要方式有三種,html拼接的,json數組,form表單經serialize()序列化的;通過dataType指定,不指定智能判斷。
2.$.ajax只提交form以文本方式,如果異步提交包含<file>上傳是傳過不過去,需要使用jquery.form.js的$.ajaxSubmit
$.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); } });