在JQuery中，$.ajax() 的用法

1.url:
要求為String型別的引數，（預設為當前頁地址）傳送請求的地址。
2.type:
要求為String型別的引數，請求方式（post或get）預設為get。注意其他http請求方法，例如put和delete也可以使用，但僅部分瀏覽器支援。
3.timeout:
要求為Number型別的引數，設定請求超時時間（毫秒）。此設定將覆蓋$.ajaxSetup()方法的全域性設定。
4.async:
要求為Boolean型別的引數，預設設定為true，所有請求均為非同步請求。如果需要傳送同步請求，請將此選項設定為false。注意，同步請求將鎖住瀏覽器，使用者其他操作必須等待請求完成才可以執行。
5.cache:
要求為Boolean型別的引數，預設為true（當dataType為script時，預設為false），設定為false將不會從瀏覽器快取中載入請求資訊。
6.data:
要求為Object或String型別的引數，傳送到伺服器的資料。如果已經不是字串，將自動轉換為字串格式。get請求中將附加在url後。防止這種自動轉換，可以檢視　　processData選項。物件必須為key/value格式，例如{foo1:"bar1",foo2:"bar2"}轉換為&foo1=bar1&foo2=bar2。如果是陣列，JQuery將自動為不同值對應同一個名稱。例如{foo:["bar1","bar2"]}轉換為&foo=bar1&foo=bar2。
7.dataType:
要求為String型別的引數，預期伺服器返回的資料型別。如果不指定，JQuery將自動根據http包mime資訊返回responseXML或responseText，並作為回撥函式引數傳遞。可用的型別如下：
xml：返回XML文件，可用JQuery處理。
html：返回純文字HTML資訊；包含的script標籤會在插入DOM時執行。
script：返回純文字JavaScript程式碼。不會自動快取結果。除非設定了cache引數。注意在遠端請求時（不在同一個域下），所有post請求都將轉為get請求。
json：返回JSON資料。
jsonp：JSONP格式。使用SONP形式呼叫函式時，例如myurl?callback=?，JQuery將自動替換後一個“?”為正確的函式名，以執行回撥函式。
text：返回純文字字串。
8.beforeSend：
要求為Function型別的引數，傳送請求前可以修改XMLHttpRequest物件的函式，例如新增自定義HTTP頭。在beforeSend中如果返回false可以取消本次ajax請求。XMLHttpRequest物件是惟一的引數。
            function(XMLHttpRequest){
               this;   //呼叫本次ajax請求時傳遞的options引數
            }
9.complete：
要求為Function型別的引數，請求完成後呼叫的回撥函式（請求成功或失敗時均呼叫）。引數：XMLHttpRequest物件和一個描述成功請求型別的字串。
          function(XMLHttpRequest, textStatus){
             this;    //呼叫本次ajax請求時傳遞的options引數
          }
10.success：要求為Function型別的引數，請求成功後呼叫的回撥函式，有兩個引數。
         (1)由伺服器返回，並根據dataType引數進行處理後的資料。
         (2)描述狀態的字串。
         function(data, textStatus){
            //data可能是xmlDoc、jsonObj、html、text等等
            this;  //呼叫本次ajax請求時傳遞的options引數
         }
11.error:
要求為Function型別的引數，請求失敗時被呼叫的函式。該函式有3個引數，即XMLHttpRequest物件、錯誤資訊、捕獲的錯誤物件(可選)。ajax事件函式如下：
       function(XMLHttpRequest, textStatus, errorThrown){
          //通常情況下textStatus和errorThrown只有其中一個包含資訊
          this;   //呼叫本次ajax請求時傳遞的options引數
       }
12.contentType：
要求為String型別的引數，當傳送資訊至伺服器時，內容編碼型別預設為"application/x-www-form-urlencoded"。該預設值適合大多數應用場合。
13.dataFilter：
要求為Function型別的引數，給Ajax返回的原始資料進行預處理的函式。提供data和type兩個引數。data是Ajax返回的原始資料，type是呼叫jQuery.ajax時提供的dataType引數。函式返回的值將由jQuery進一步處理。
            function(data, type){
                //返回處理後的資料
                return data;
            }
14.dataFilter：
要求為Function型別的引數，給Ajax返回的原始資料進行預處理的函式。提供data和type兩個引數。data是Ajax返回的原始資料，type是呼叫jQuery.ajax時提供的dataType引數。函式返回的值將由jQuery進一步處理。
            function(data, type){
                //返回處理後的資料
                return data;
            }
15.global：
要求為Boolean型別的引數，預設為true。表示是否觸發全域性ajax事件。設定為false將不會觸發全域性ajax事件，ajaxStart或ajaxStop可用於控制各種ajax事件。
16.ifModified：
要求為Boolean型別的引數，預設為false。僅在伺服器資料改變時獲取新資料。伺服器資料改變判斷的依據是Last-Modified頭資訊。預設值是false，即忽略頭資訊。
17.jsonp：
要求為String型別的引數，在一個jsonp請求中重寫回撥函式的名字。該值用來替代在"callback=?"這種GET或POST請求中URL引數裡的"callback"部分，例如{jsonp:'onJsonPLoad'}會導致將"onJsonPLoad=?"傳給伺服器。
18.username：
要求為String型別的引數，用於響應HTTP訪問認證請求的使用者名稱。
19.password：
要求為String型別的引數，用於響應HTTP訪問認證請求的密碼。
20.processData：
要求為Boolean型別的引數，預設為true。預設情況下，傳送的資料將被轉換為物件（從技術角度來講並非字串）以配合預設內容型別"application/x-www-form-urlencoded"。如果要傳送DOM樹資訊或者其他不希望轉換的資訊，請設定為false。
21.scriptCharset：
要求為String型別的引數，只有當請求時dataType為"jsonp"或者"script"，並且type是GET時才會用於強制修改字符集(charset)。通常在本地和遠端的內容編碼不同時使用。
案例程式碼：
$(function(){ $('#send').click(function(){ $.ajax({ type: "GET", url: "test.json", data: {username:$("#username").val(), content:$("#content").val()}, dataType: "json"
, success: function(data){ $(
'#resText').empty();
//清空resText裡面的所有內容 var
html = ''
; $.each(data, function(commentIndex, comment){ html
+= '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para"' + comment['content'] + '</p></div>'; }); $('#resText').html(html); } }); }); });
 
22.順便說一下$.each()函式:
$.each()函式不同於JQuery物件的each()方法，它是一個全域性函式，不操作JQuery物件，而是以一個陣列或者物件作為第1個引數，以一個回撥函式作為第2個引數。回撥函式擁有兩個引數：第1個為物件的成員或陣列的索引，第2個為對應變數或內容。


$.ajax的一般格式
$.ajax({
     type: 'POST',
     url: url ,
    data: data ,
    success: success ,
    dataType: dataType
});

需要注意的一些地方：
  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);
}
});


$.ajax()跟($.post(),$.get())最主要的差別就是 成功回撥後,執行success. . $.post(),$.get()就只能簡單的做下傳遞 ,返回. .後續工作沒法繼續.所以看情況呼叫
在JQuery中，AJAX有三種實現方式：$.ajax() , $.post , $.get()。
首先我們看$.get():

$.get("test.jsp",
{ name: "cssrain", time: "2008/01/21" }, //要傳遞的資料
function(data){
alert("返回的資料: " + data);
}
)

然後看$.post():
跟$.get()格式一樣.

$.post("test.jsp",
{ name: "cssrain", time: "2008/01/21" }, //要傳遞的資料
function(data){
alert("返回的資料: " + data);
}
)

上面2種方式的區別應該就是 請求方式不同(一個get 一個post).
最後我們看$.ajax():

$.ajax({
url:'Accept.jsp',
type:'post', //資料傳送方式
dataType:'html', //接受資料格式 (這裡有很多,常用的有html,xml,js,json)
data:'text='+$("#name").val()+'&date='+new Date(), //要傳遞的資料
error: function(){ //失敗
alert('Error loading document');
},
success: function(msg){ //成功
alert( "Data Saved: " + msg );
}
});

例項
前臺jsp部分的程式碼如下：...
票數:

<span id="i<%=id%>"><%=vote_number%></span><br/>
<a onclick=myvote(<%=id%>); href='javascript:;'">投票</a>

...
js部分的程式碼如下

function myvote(id){
$.post("vote.jsp", { id: id },
function(data){
eval("var data="+data);
if (data.issucc=="0"){
alert(data.mess)
}else{
//alert("更新頁面");
$("#i"+data.myid).html(data.votenum);
}
});
}

返回資料為json
後臺返回的json資料如下
{issucc:,mess:”“,votenum:,myid:}
issucc:是否成功
mess:資訊，主要是錯誤資訊，比如沒登入，超過限制等
votenum：投票後的得票總數
myid:投票的id，用於更新頁面的投票數
一個註冊登入例項
js
login.jsp返回的型別為text形式，正確時是“OK”，錯誤時是
“error”。

var userName;
var password;
var result;
$(document).ready(function(){
$("#load").hide();
$("#success").hide();
$("#error").hide();
});
$(document).ready(function(){
$("#button").click(function(){
$("#error").hide();
$("#load").show("slow");
userName = $("#userName").val();
password = $("#password").val();
$.ajax({type: "post",
url: "login.jsp",
dataType: "html",
data: "userName="+userName+"&password="+password,
success: function(result){
var res = String($.trim(result));
if(res=="OK"){
$("#myTable").hide("slow");
$("#success").show("slow");
}else if(res=="error"){
$("#error").show("slow");
$("#load").hide("slow");
}else{
alert("返回異常");}
}
});
});
});

jsp頁面
第一種responseText格式

<%@ page language="java" pageEncoding="gb2312"%>
<%
String userName = request.getParameter("userName");
String password = request.getParameter("password");
if(password.equals("longleg")&&userName.equals("thy")){
out.print("OK");
}else{out.print("error");}
%>


程式碼中有註釋，大家參考使用吧
undefined

$.ajax({
            url: '這個地址要換成你自己的',
            data: {S_CourseID: courseid , CurrTime : new Date().getTime()}, //加個時間戳，否則會不自動更新資料
            dataType: 'json',
            success: function(data)
            {
                if (data != null) {
                    if ( data.length > 0) {
                         for(var i = 0 ; i < data.length ;i++){
specids = specids + data[i].S_SpecialtyID + ","; //獲取JSON物件中的資料
coursetypeid = data[i].S_CourseTypeID ;
   }
if(specids.length>0){specids=specids.substring(0,specids.length-1);
                        }
               }


今天有這樣一個需求，點選六個大洲，出現對應的一些請求資訊，展示在下面，請求請求過後，第二次點選就無需請求。
如圖所示：點選北美洲下面出現請求的一些數

html程式碼結構：
<div class="conSixmap">
<div class="name conmap01" data-name="beimeizhou">
<a href="javascript:void(0)">北美洲</a>
<div class="condetail"></div>
</div>
<div class="name conmap02" data-name="nanmeizhou">
<a href="javascript:void(0)">南美洲</a>
<div class="condetail"></div>
</div>
<div class="name conmap03" data-name="ouzhou">
<a href="javascript:void(0)">歐洲</a>
<div class="condetail"></div>
</div>
<div class="name conmap04" data-name="feizhou">
<a href="javascript:void(0)">非洲</a>
<div class="condetail"></div>
</div>
<div class="name conmap05" data-name="yazhou">
<a href="javascript:void(0)">亞洲</a>
<div class="condetail"></div>
</div>
<div class="name conmap06" data-name="dayangzhou">
<a href="javascript:void(0)">大洋洲</a>
<div class="condetail"></div>
</div>
</div>

css樣式：
.conSixmap{position:relative;width:678px;height:335px;margin:0 auto;background:url(../images/tuanduimapBg.png) no-repeat;color:#000;font-family:"微軟雅黑"}
.conSixmap .name .condetail{display:none;position:absolute;z-index:10;width:216px;padding:10px;left:50%;margin-left:-118px;top:54px;background:url(../images/opcity83.png) repeat;border-radius:5px;}
.conSixmap .condetail span{display:block;color:#fff;font-size:14px;text-align:left;}
.conSixmap .name{position:absolute;width:52px;height:55px;}
.conSixmap .name a{display:block;z-index:2;position:absolute;padding-top:35px;text-align:center;cursor:pointer;width:52px;height:20px;color:#000;font-size:12px;}
.conSixmap .conmap01{left:91px;top:73px;}
.conSixmap .conmap01 a{background:url(../images/beimeipicBg.png) no-repeat top center;}
.conSixmap .conmap02 {left:180px;top:213px;}
.conSixmap .conmap02 a{background:url(../images/nanmeimapbg.png) no-repeat top center;}
.conSixmap .conmap03 {left:339px;top:68px;}
.conSixmap .conmap03 a{background:url(../images/ouzhoumapBg.png) no-repeat top center;}
.conSixmap .conmap04{left:327px;top:158px;}
.conSixmap .conmap04 a{background:url(../images/feizhoumapbg.png) no-repeat top center;}
.conSixmap .conmap05 {left:480px;top:75px;}
.conSixmap .conmap05 a{background:url(../images/yazhoumapBg.png) no-repeat top center;}
.conSixmap .conmap06 {left:545px;top:220px;}
.conSixmap .conmap06 a{background:url(../images/dayangmapbg.png) no-repeat top center;}
json格式：
{
"beimeizhou": [
"請求的json資料1",
"請求的json資料2"
],
"nanmeizhou": [
"請求的json資料3",
"請求的json資料4"
],
"ouzhou": [
"請求的json資料5",
"請求的json資料6",
"請求的json資料7",
"請求的json資料8"
],
"feizhou": [
"請求的json資料9",
"請求的json資料10",
"請求的json資料11",
"請求的json資料12"
],
"yazhou": [
"請求的json資料13",
"請求的json資料14"
],
"dayangzhou": [
"請求的json資料15",
"請求的json資料16"
]
}

js程式碼：
$(document).ready(function(){
//新增地圖
var stauteArr={
'beimeizhou':'true',
'nanmeizhou':'true',
'ouzhou':'true',
'feizhou':'true',
'yazhou':'true',
'dayangzhou':'true'
};
$(".conSixmap .name").on('click',function(){
var _this=this;
var htmlcon="";
$(this).siblings(".name").children(".condetail").fadeOut(500);
$(this).children(".condetail").fadeIn(500);
var _name=$(this).attr('data-name');
$.ajax({
url:"js/schoolMap.json",
type:'get',
data:{},
dataType:"json",
success: function(data){
for(var i in data){
if(_name==i && stauteArr[i]=='true'){
for(var j=0;j<data[i].length;j++){
htmlcon+="<span>"+data[i][j]+"</span>";
}
$(_this).children(".condetail").append(htmlcon);
stauteArr[i]='false';
}
}
},
error: function(){
alert('請求失敗，請檢查網路');
}
});
});
});