Ajax运用的归纳整理

Ajax请求包括常见三种 本人日常使用是完整版,但是最近发现ajax中发post请求也是很快的而且很方便,将多种方法都试一遍线顺便整理一下

  1. | GET请求 | $.get(url,[data],[callback],[type]) |
  2. | POST请求 | $.post(url,[data],[callback],[type]) |
  3. | AJAX请求 | `$.ajax([settings])

POST请求语法格式

$.post(url, [data], [callback], [type])
其中,参数说明如下:
| 参数| 说明 |
| url| 请求的服务器端url地址 |
|data|发送给服务器端的请求参数,格式可以是key=value也可以是js对象|
|callback| 当请求成功后的回掉函数,可以在函数体中编写我们的逻辑代码|
|type| 预期的返回数据的类型,取值可以是 xml, html, script, json, text, _defaul等

1
2
3
4
5
6
7
8
9
10
11
12
"user/login",//请求地址
$("#loginForm").serialize(),//表单所有数据
function (resultInfo) {
if(resultInfo.flag){
//登录成功,跳转到首页
location.href="index.html";
}else{
//失败,显示消息
$("#errorMsg").text(resultInfo.errorMsg);
} },
"json"
);$("#errorMsg").text("请输入用户名或密码");

现在感觉发post请求,同这个会更简单且更加清晰,只需要url,[data],[callback],[type]),清晰明了,各个部分以’,’分开,

AJAX请求

我之前是完全的ajax请求格式太多但是功能也更加全面

引用自w3school jQuery 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
 类型:Object

可选。AJAX 请求设置。所有选项都是可选的。
async

类型:Boolean

默认值: true。默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。

注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
beforeSend(XHR)

类型:Function

发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。

XMLHttpRequest 对象是唯一的参数。

这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。
cache

类型:Boolean

默认值: true,dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。

jQuery 1.2 新功能。
complete(XHR, TS)

类型:Function

请求完成后回调函数 (请求成功或失败之后均调用)。

参数: XMLHttpRequest 对象和一个描述请求类型的字符串。

这是一个 Ajax 事件。
contentType

类型:String

默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。

默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器(即使没有数据要发送)。
context

类型:Object

这个对象用于设置 Ajax 相关回调函数的上下文。也就是说,让回调函数内 this 指向这个对象(如果不设定这个参数,那么 this 就指向调用本次 AJAX 请求时传递的 options 参数)。比如指定一个 DOM 元素作为 context 参数,这样就设置了 success 回调函数的上下文为这个 DOM 元素。

$.ajax({ url: "test.html", context: document.body, success: function(){
$(this).addClass("done");
}});

route

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
  var cid=getParameter("cid")
$.ajax({
url:"/route/showPage",//请求路径
data:{"currentPage":currentPage,
"cid":cid},//发送参数
dataType:"json", //接收类型确认
success:function (res) {
toShowRouteDetail(res)
}
})
}
ShowRoute(1)


//显示旅游线路
function toShowRouteDetail(res) {
$("#show2Route").empty()
for(var i=0;i<res.listRoute.length;i++){
var temp=$("<li>\n" +
" <div class=\"img\"><img width='290px' src=\""+res.listRoute[i].rimage+"\" alt=\"\"></div>\n" +
" <div class=\"text1\">\n" +
" <p>"+res.listRoute[i].rname+"</p>\n" +
" <br/>\n" +
" <p>"+res.listRoute[i].routeIntroduce+"</p>\n" +
" </div>\n" +
" <div class=\"price\">\n" +
" <p class=\"price_num\">\n" +
" <span>&yen;</span>\n" +
" <span>"+res.listRoute[i].price+"</span>\n" +
" <span>起</span>\n" +
" </p>\n" +
" <p><a href=\"/route_detail.html?rid="+res.listRoute[i].rid+"\">查看详情</a></p>\n" +
" </div>\n" +
" </li>");
$("#show2Route").append(temp)
}

GET请求

$.get(url,[data],[callback],[type data
方式一:key=value&key=value
方式二:{key:value,key:value…}
| callback | 回调函数:当请求成功后触发的函数 |
|type|返回参数类型:取值可以是xml,html,script, json,text,_defaul等 |

1
2
3
4
5
6
7
8
9
10
11
12
13
14
ajaxGetFn() {//Ajax的GET请求:
//方式一:key=value&key=value形式传值
// $.get("/getDemo","name='张三'&age=18",function (res) {
// //处理响应数据,并在浏览器上显示
// alert(res);
// },"text");

//方式二:{key:value,key:value}形式传值
$.get("/getDemo",{"name":"张三","age":18},function (res) {
//处理响应数据
alert(res);
},"text");

}