JQuery中的Ajax应用

1.1. ajax 函数应用

juqery 中的ajax函数用于向服务端发起一个异步的ajax请求.

[] 里的东西都可以不写。

例如:

url（地址）
type（请求方式）:”GET”:默认值可不写。
data（数据）:可以不写，传输数据时才需要写。可为params（变量）,也可为json格式的javascript对象。
params="pageCurrent"等价于{pageCurrent“:1”}
dataType: "json" 默认值可不写。
$.ajax方法会把服务器端返回的数据看成json串，函数获取到的值确实是json串，它会把json串转为对象
success:当服务器端响应ok没有出现问题，ajax引擎会回调success右边的函数。success右边的函数如果是function(result),这个result是对象，服务器返回到客户端的是json串，但是$.ajax默认会把json串转成对象，回调这个function(result)函数
error:服务器端响应失败，没有对异常进行处理，会执行error右边的函数
cache（缓存）:默认为true-要缓存
async（异步）：默认为true-异步。false为同步

最简单方式

$.ajax({ 
url: "address",
success: function(result){
  //返回的result是对象
}
})

var params="pageCurrent=1";
$.ajax({ 
data:params,
url: "address",
success: function(result){
}
})

$.ajax({ url: "address",
 type:"GET",
data: { param1: "foo bar", param2: "baz"},
dataType: "json",
success: successHandlerFunction,
error: errorHandlerFunction,
cache: false
});

Ajax 函数应用案例

$(function() {
$("#data-button-2").click(processAjaxRequest);
});
function  processAjaxRequest () {
var params ={ param1: $("#field3").val(),param2: $("#field4").val() };
$.ajax({ url: "doFindPageObjects.do",
data: params,
success: function(result){

} );
});

1.2. load函数应用

jquery 中的load函数一般用于在某个位置异步加载某个url页面(任意文档内容)
在某一个位置加载url
语法:load(url,[data],[callback])

其中:

1. url 表示远程一个地址
2. data 表示要传递数据(key/value)
3. callback 表示一个回调函数

例如: 案例1

$("#mainContentId").load("doLogListUI.do");

例如: 案例2

$("#mainContentId").load("doLogListUI.do",function(){
});

例如: 案例3

$("#mainContentId").load("doLogListUI.do",{color:red},function(){
//页面加载完成后执行的函数
});

如上函数ajax函数等价写法

function doLoadUI(){
$.ajax({
   url:"doLogList.do",
   success:function(result){//result是html
        $("#mainContentId").html(result);
  }
});
}

相当于把doLogList.do访问的页面插入到#mainContentId元素里

1.3. get函数应用

Jquery中的get函数用于向服务端发起Ajax GET请求
获取对应格式的数据
语法:
$.get("url",[data], [callback],[dataType])
[data]为参数[callback]为回调函数[dataType]返回数据的格式(可以为"text"或者"json")
例如:

var url=“doFindPageObjects.do”;
var params={pageCurrent:1};
$.get(url,params,function(result){
//处理返回结果
doHandleResponseResult(result);
},"json");

等价于ajax函数

var url=“doFindPageObjects.do”;
var params={pageCurrent:1};
$.ajax({url:url,data:params,dataType;"json",success:function(result){
  doHandleResponseResult(result);
}});

1.4. getJson函数应用(固定格式的get方法，相当于返回值是json)

Jquery中的getJSON函数用于向服务端发起Ajax GET请求
获取json格式的数据
语法:
$.getJSON("url",[data], [callback])

例如:

$.getJSON(“doFindPageObjects.do”,{pageCurrent:1},function(result){

//处理返回结果

});

1.5. post 函数应用

POST方法为Jquery中的发送Ajax post请求的一种方法.

语法:post(url,[data],[callback],[dataType])

例如:

$.post("doFindPageObjects.do",{pageCurrent:1},function(result){

},"json")

等价于ajax函数

var url=“doFindPageObjects.do”;
var params={pageCurrent:1};
$.ajax({url:url,data:params,type:"post",dataType;"json",success:function(result){

}});

注意没有postJson