Python之路:Jquery Ajax的使用

Ajax概述

  Ajax就是經過 HTTP 請求加載遠程數據。一般用於定製一些http請求來靈活的完成前端與後端的數據交互需求。php

  注意,全部的選項均可以經過$.ajaxSetup()函數來全局設置。html

  JQuery Ajax之因此能發送http請求, 是調用了html中的XMLHttpRequest對象(原生ajax)。前端

  另外還有一種跨域Ajax。這個會在最後介紹到 。jquery

Ajax的通常格式

1
2
3
4
5
6
7
$.ajax({
      type: 'POST',
      url: url ,
     data: data ,
     success: success ,
     dataType: dataType
});

Ajax的參數說明

參數名 類型 描述
url String (默認: 當前頁地址) 發送請求的地址。
type String (默認: "GET") 請求方式 ("POST" 或 "GET"), 默認爲 "GET"。注意:其它 HTTP 請求方法,如 PUT 和 DELETE 也可使用,但僅部分瀏覽器支持。
timeout Number 設置請求超時時間(毫秒)。此設置將覆蓋全局設置。
async Boolean (默認: true) 默認設置下,全部請求均爲異步請求。若是須要發送同步請求,請將此選項設置爲 false。注意,同步請求將鎖住瀏覽器,用戶其它操做必須等待請求完成才能夠執行。
beforeSend Function 發送請求前可修改 XMLHttpRequest 對象的函數,如添加自定義 HTTP 頭。XMLHttpRequest 對象是惟一的參數。
function (XMLHttpRequest) {  this; // the options for this ajax request}
cache Boolean (默認: true) jQuery 1.2 新功能,設置爲 false 將不會從瀏覽器緩存中加載請求信息。
complete Function 請求完成後回調函數 (請求成功或失敗時均調用)。參數: XMLHttpRequest 對象,成功信息字符串。
function (XMLHttpRequest, textStatus) {  this; // the options for this ajax request}
contentType String (默認: "application/x-www-form-urlencoded") 發送信息至服務器時內容編碼類型。默認值適合大多數應用場合。
data Object,
String
發送到服務器的數據。將自動轉換爲請求字符串格式。GET 請求中將附加在 URL 後。查看 processData 選項說明以禁止此自動轉換。必須爲 Key/Value 格式。若是爲數組,jQuery 將自動爲不一樣值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換爲 '&foo=bar1&foo=bar2'。
dataType String

預期服務器返回的數據類型。若是不指定,jQuery 將自動根據 HTTP 包 MIME 信息返回 responseXML 或 responseText,並做爲回調函數參數傳遞,可用值:ajax

"xml": 返回 XML 文檔,可用 jQuery 處理。json

"html": 返回純文本 HTML 信息;包含 script 元素。後端

"script": 返回純文本 JavaScript 代碼。不會自動緩存結果。跨域

"json": 返回 JSON 數據 。數組

"jsonp": JSONP 格式。使用 JSONP 形式調用函數時,如 "myurl?callback=?" jQuery 將自動替換 ? 爲正確的函數名,以執行回調函數。瀏覽器

 

 

 

 

 

error Function (默認: 自動判斷 (xml 或 html)) 請求失敗時將調用此方法。這個方法有三個參數:XMLHttpRequest 對象,錯誤信息,(可能)捕獲的錯誤對象。
function (XMLHttpRequest, textStatus, errorThrown) {  // 一般狀況下textStatus和errorThown只有其中一個有值   this; // the options for this ajax request}
global Boolean (默認: true) 是否觸發全局 AJAX 事件。設置爲 false 將不會觸發全局 AJAX 事件,如 ajaxStart 或 ajaxStop 。可用於控制不一樣的Ajax事件
ifModified Boolean (默認: false) 僅在服務器數據改變時獲取新數據。使用 HTTP 包 Last-Modified 頭信息判斷。
processData Boolean (默認: true) 默認狀況下,發送的數據將被轉換爲對象(技術上講並不是字符串) 以配合默認內容類型 "application/x-www-form-urlencoded"。若是要發送 DOM 樹信息或其它不但願轉換的信息,請設置爲 false。
success Function 請求成功後回調函數。這個方法有兩個參數:服務器返回數據,返回狀態
function (data, textStatus) {  // data could be xmlDoc, jsonObj, html, text, etc...  this; // the options for this ajax request}

Ajax的一些例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
//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);  
     }
});

Ajax須要注意的一些地方

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

  2.$.ajax只提交form以文本方式,若是異步提交包含<file>上傳是傳過不過去,須要使用jquery.form.js的$.ajaxSubmit

 

Ajax跨域請求

  默認狀況下,ajax只能給本身的域名發送ajax請求。

  跨域請求是指經過ajax去訪問非本網站域名,與其餘網站進行數據交互。這種請求受到瀏覽器「同源策略」的限制,會被瀏覽器自己攔截(在收到迴應數據的時候被瀏覽器攔截,實際請求已經發送出去)。

解決跨域的兩種方式

  jsonp 和 跨域資源共享就是解決ajax跨域請求的兩種方式。具體案例,能夠查看連接:Ajax大保健全套

相關文章
相關標籤/搜索