之前说到原生JS的ajax的用法,
ajax从入门到放弃
今天总结下jquery ajax的用法
这是之前用原生JS对于跨浏览器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
59function ajax(opts){
if(window.XMLHttpRequest){//针对于现代浏览器
xml=new XMLHttpRequest();
}else if(window.ActiveXObject){//正对于IE6，IE7
try{
xml=new ActiveXObject("Msxm12.XMLHTTP")
}catch(e){
try{
xml=new ActiveXObject("Microsoft.XMLHTTP")
}catch(e){}
}
}
var str=[];//获得一个空数组
for(var key in opts.data){
str+=opts.data[key]+"&";
}
//去除末尾的"&"
str=str.replace(/&$/,"");
//设置事件处理函数
xml.onreadystatechange=function(){
if(xml.readyState===4&& xml.status===200){
var json=JSON.parse(xml.responseText);
success(json);
}else if(xml.readyState===4&&xml.status===404){
error();
}
}
//设置ajax传递的方式
if(opts.type.toLowerCase()==="get"){
xml.open(opts.type,opts.url+"?"+str,true);
xml.send();
}
if(opts.type.toLowerCase()==="post"){
xml.open(opts.type,opts.url,true)
xml.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xml.send(str)
}
}
ajax({
url:liruihaod.php,
data:{
name:"lirui",
age:19
},
type:"post",
success:function(node){
onSuccess(node)
},
error:function(){
onError();
}
})
其实jquery 和这个封装方法差不多- -貌似应该说我封装的方法和jquery差不多。然后暴露了一下接口。完全帮我们省了很多事。对于ajax只需要这样。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15$.ajax({
url:xxx,
data:{
name:"z-one",
age:23
},
datatype:"json",
type:"post",
success:function(node){
onSuccess(node);
}，
error:function (){
onError();
}
})
感觉就是跟我们做了一个封装.的确方便了很多。
下面使用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
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul,li{
padding:0;
margin:0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.ct>li{
border:1px solid black;
line-height: 40px;
height:40px;
margin-bottom:10px;
padding-left:20px;
}
.btn{
width:80px;
height:40px;
line-height: 40px;
border:1px solid #E27272;
border-radius: 5px;
text-align: center;
margin:40px auto;
cursor:pointer;
}
img{
width:80px;
height:40px;}
.hover{
background:green;
color:white;
}
</style>
</head>
<body>
<div id="wrap">
<ul class="ct">
<li>内容1</li>
<li>内容2</li>
</ul>
</div>
<div class="btn">加载更多</div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
var str=2;
var num=6;
$(".btn").on("click",function(){
if($(this).data('key')){ //获取一个状态锁
return;
}
$(this).data('key', true)
$(this).html("<img src='http://cdn.duitang.com/uploads/blog/201407/11/20140711232957_KudhU.thumb.224_0.gif'>");
$.ajax({
url:"level-26-6.php",
dataType:"json",
data:{
str:str,
num:num
},
type:"post",
success:function(e){
$(".btn").data("key",false)
onSuccess(e);
str+=6;
$(".btn").text("加载更多");
},
error:function(){
$(".btn").data("key",false)
alert("出错啦");
$(".btn").text("加载更多");
}
})
})
function onSuccess(e){
var tem=e.data;
if(e.status===1){
for(var i=0;i<tem.length;i++){
$(".ct").append("<li>"+tem[i]+"</li>");
}
}
}
$(".ct").on("mouseenter","li",function(){
$(this).addClass('hover');
}).on("mouseleave","li",function(){
$(this).removeClass('hover')
})
</script>
</html>