1. 程式人生 > >jQuery中$.get()、$.post()和$.ajax()

jQuery中$.get()、$.post()和$.ajax()

nag post 這就是 也有 定義 消息 ram 結果 通用

jQuery.get()方法:

$.get(url,data,success(response,status,xhr),dataType)

該函數是簡寫的 Ajax 函數,等價於:

[javascript] view plain copy
  1. $.ajax({
  2. url: url,
  3. data: data,
  4. success: success,
  5. dataType: dataType
  6. });

根據響應的不同的 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
  1. $("button").click(function(){
  2. $.get("demo_ajax_load.txt", function(result){
  3. $("div").html(result);
  4. });
  5. });

jQuery.post()方法:

$.post(url,data,success(data, textStatus, jqXHR),dataType)

該函數是簡寫的 Ajax 函數,等價於:

[javascript] view plain copy
  1. $.ajax({
  2. type: ‘POST‘,
  3. url: url,
  4. data: data,
  5. success: success,
  6. dataType: dataType
  7. });

根據響應的不同的 MIME 類型,傳遞給 success 回調函數的返回數據也有所不同,這些數據可以是 XML 根元素、文本字符串、JavaScript 文件或者 JSON 對象。也可向 success 回調函數傳遞響應的文本狀態。

參數 描述
url 必需。規定把請求發送到哪個 URL。
data 可選。映射或字符串值。規定連同請求發送到服務器的數據。
success(data, textStatus, jqXHR) 可選。請求成功時執行的回調函數。
dataType

可選。規定預期的服務器響應的數據類型。
默認執行智能判斷(xml、json、script 或 html)。

使用 AJAX 的 GET 請求來改變 div 元素的文本:

[javascript] view plain copy
  1. $("input").keyup(function(){
  2. txt=$("input").val();
  3. $.post("demo_ajax_gethint.asp",{suggest:txt},function(result){
  4. $("span").html(result);
  5. });
  6. });

實例:
一個簡單的 POST 請求功能以取代復雜 $.ajax 。請求成功時可調用回調函數。如果需要在出錯時執行函數,請使用 $.ajax。
示例代碼:

Ajax.aspx:

[javascript] view plain copy
  1. Response.ContentType = "application/json";Response.Write("{result: ‘" + Request["Name"] + ",你好!(這消息來自服務器)‘}");

jQuery 代碼:

[javascript] view plain copy
  1. $.post("Ajax.aspx", { Action: "post", Name: "lulu" },
  2. function (data, textStatus){
  3. // data 可以是 xmlDoc, jsonObj, html, text, 等等.
  4. //this;
  5. // 這個Ajax請求的選項配置信息,請參考jQuery.get()說到的this
  6. alert(data.result);
  7. }, "json");

點擊提交:
這裏設置了請求的格式為"json":
$.ajax()這個是jQuery 的底層 AJAX 實現。簡單易用的高層實現見 $.get, $.post 等。
這裏有幾個Ajax事件參數:beforeSend ,success ,complete ,error 。我們可以定義這些事件來很好的處理我們的每一次的Ajax請求。

[javascript] view plain copy
  1. $.ajax({
  2. url: ‘stat.php‘,
  3. type: ‘POST‘,
  4. data:{Name:"keyun"},
  5. dataType: ‘html‘,
  6. timeout: 1000,
  7. error: function(){alert(‘Error loading PHP document‘);},
  8. success: function(result){alert(result);}
  9. });

$.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. //1.$.ajax帶json數據的異步請求
    2. var aj = $.ajax( {
    3. url:‘productManager_reverseUpdate‘,// 跳轉到 action
    4. data:{
    5. selRollBack : selRollBack,
    6. selOperatorsCode : selOperatorsCode,
    7. PROVINCECODE : PROVINCECODE,
    8. pass2 : pass2
    9. },
    10. type:‘post‘,
    11. cache:false,
    12. dataType:‘json‘,
    13. success:function(data) {
    14. if(data.msg =="true" ){
    15. // view("修改成功!");
    16. alert("修改成功!");
    17. window.location.reload();
    18. }else{
    19. view(data.msg);
    20. }
    21. },
    22. error : function() {
    23. // view("異常!");
    24. alert("異常!");
    25. }
    26. });
    27. //2.$.ajax序列化表格內容為字符串的異步請求
    28. function noTips(){
    29. var formParam = $("#form1").serialize();//序列化表格內容為字符串
    30. $.ajax({
    31. type:‘post‘,
    32. url:‘Notice_noTipsNotice‘,
    33. data:formParam,
    34. cache:false,
    35. dataType:‘json‘,
    36. success:function(data){
    37. }
    38. });
    39. }
    40. //3.$.ajax拼接url的異步請求
    41. var yz=$.ajax({
    42. type:‘post‘,
    43. url:‘validatePwd2_checkPwd2?password2=‘+password2,
    44. data:{},
    45. cache:false,
    46. dataType:‘json‘,
    47. success:function(data){
    48. if( data.msg =="false" ) //服務器返回false,就將validatePassword2的值改為pwd2Error,這是異步,需要考慮返回時間
    49. {
    50. textPassword2.html("<font color=‘red‘>業務密碼不正確!</font>");
    51. $("#validatePassword2").val("pwd2Error");
    52. checkPassword2 = false;
    53. return;
    54. }
    55. },
    56. error:function(){}
    57. });
    58. //4.$.ajax拼接data的異步請求
    59. $.ajax({
    60. url:‘<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action‘,
    61. type:‘post‘,
    62. data:‘merName=‘+values,
    63. async : false, //默認為true 異步
    64. error:function(){
    65. alert(‘error‘);
    66. },
    67. success:function(data){
    68. $("#"+divs).html(data);
    69. }
    70. });

jQuery中$.get()、$.post()和$.ajax()