jQuery中$.get()、$.post()和$.ajax()
jQuery.get()方法:
$.get(url,data,success(response,status,xhr),dataType)
該函數是簡寫的 Ajax 函數,等價於:
[javascript] view plain copy- $.ajax({
- url: url,
- data: data,
- success: success,
- dataType: dataType
- });
根據響應的不同的 MIME 類型,傳遞給 success 回調函數的返回數據也有所不同,這些數據可以是 XML root 元素、文本字符串、JavaScript 文件或者 JSON 對象。也可向 success 回調函數傳遞響應的文本狀態。
參數 | 描述 |
url | 必需。規定將請求發送的哪個 URL。 |
data | 可選。規定連同請求發送到服務器的數據。 |
success(response,status,xhr) | 可選。規定當請求成功時運行的函數。 額外的參數: response - 包含來自請求的結果數據 status - 包含請求的狀態 xhr - 包含 XMLHttpRequest 對象 |
dataType | 可選。規定預計的服務器響應的數據類型。 默認地,jQuery 將智能判斷。 可能的類型: "xml" "html" "text" "script" "json" "jsonp" |
使用 AJAX 的 GET 請求來改變 div 元素的文本:
[javascript] view plain copy- $("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 |
可選。規定預期的服務器響應的數據類型。 |
使用 AJAX 的 GET 請求來改變 div 元素的文本:
[javascript] view plain copy- $("input").keyup(function(){
- txt=$("input").val();
- $.post("demo_ajax_gethint.asp",{suggest:txt},function(result){
- $("span").html(result);
- });
- });
實例:
一個簡單的 POST 請求功能以取代復雜 $.ajax 。請求成功時可調用回調函數。如果需要在出錯時執行函數,請使用 $.ajax。
示例代碼:
Ajax.aspx:
[javascript] view plain copy- Response.ContentType = "application/json";Response.Write("{result: ‘" + Request["Name"] + ",你好!(這消息來自服務器)‘}");
jQuery 代碼:
[javascript] view plain copy- $.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請求。
[javascript] view plain copy
- $.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。
可以看出,在表單提交的方式上兩者存在很大的不同:
1.Post方法將表單數據填充到HTTP請求報文中的實體主體部分,使用者是看不到的。而GET方法則是將表單數據直接傳送到請求行的URL字段來實現表單數據提交的。這也就決定了使用POST是相對比較安全的,而是用GET方法的安全性就很低。
除此之外,GET方法和POST方法另一個重要的區別是:
2.GET方法傳送的數據量較小,一般只有2k。而POST方法傳送的數據量較大,理論上沒有上限。
$.ajax()需要註意的一些地方:
1.data主要方式有三種,html拼接的,json數組,form表單經serialize()序列化的;通過dataType指定,不指定智能判斷。
2.$.ajax只提交form以文本方式,如果異步提交包含<file>上傳是傳過不過去,需要使用jquery.form.js的$.ajaxSubmit
$.ajax() 實際應用例子
[javascript] view plain copy- //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中$.get()、$.post()和$.ajax()