1、JQuery支持的Ajax功能实现方式:
一共有四种方式来实现JQuery的ajax功能分别为:
- $.ajax
- $.get
- $.post
- $.onload
1、$.ajax方式
这个方法是最接近原生Ajax的一个方法:
常用属性有:
- type:用于指定类型取值为POST或GET
- url:请求资源路径
- dataType:异步请求返回类型,取值为:text,json,html,xml
- async:是否发送异步请求,取值为:true或false,如果我false将阻塞浏览器线程等待服务器响应信息,但不会刷新页面,默认值为true
- data:请求中的参数数据,字符串值,只要符合参数的数据结构即可,例如:name=张三&age=23
- success:请求成功后执行的回调方法 参数为一个方法引用,通常这里我们设置一个匿名方法,改方法的参数data为Web服务响应的的所有内容
- error:请求失败后执行的回调方法 参数为一个方法引用,通常这里我们设置一个匿名方法,当异步引擎的状态码不为4 http请求状态码不为200时执行
使用方法:
<script type="text/javascript">
$(function() {
$("#xsxx").click(function(){
$.ajax({
//type:"post",
url : "myServlet1.do",
dataType : "text",
data : "username=张三&password=123",
success : function(data) {
document.getElementById("xs").innerHTML=data;
},
error : function() {
alert("服务器崩溃了");
}
});
})
})
</script>
</head>
<body>
<button id="xsxx">显示信息</button>
<span id="xs"></span>
</body>
2、$.get方式
该方式有效的简化了$.ajax的方式:
参数如下:
参数1 必选参数 字符串类型 用于指定请求路径
参数2 可选参数 key/value的对象类型 用于传递请求参数
参数3 可选参数 方法引用类型 用于设置毁掉方法通常我们这里这个一个匿名方法,改方法的参数data为Web服务响应的的所有内容
参数4 可选参数 字符串类型 用于设定请求返回信息类型,取值为text html json script
使用方式:
<script type="text/javascript">
//文本参数
$(function() {
$("#xsxx").click(function(){
$.get(
"myServlet1.do",
{"username":"lisi","password":"234"},
//"username=zs&password=123",
function(data) {
document.getElementById("xs").innerHTML=data;
},
"text"
);
})
})
</script>
</head>
<body>
<button id="xsxx">显示信息</button>
<span id="xs"></span>
</body>
3、$.post方式
参数1 必选参数 字符串类型 用于指定请求路径
参数2 可选参数 key/value的对象类型 用于传递请求参数
参数3 可选参数 方法引用类型 用于设置毁掉方法通常我们这里这个一个匿名方法,改方法的参数data为Web服务响应的的所有内容
参数4 可选参数 字符串类型 用于设定请求返回信息类型,取值为text html json script
使用方法:
<script type="text/javascript">
//文本参数
$(function() {
$("#xsxx").click(function(){
$.post(
"myServlet1.do",
{"username":"李四","password":"234"},
//"username=zs&password=123",
function(data) {
document.getElementById("xs").innerHTML=data;
},
"text"
);
})
})
</script>
</head>
<body>
<button id="xsxx">显示信息</button>
<span id="xs"></span>
</body>
上述3种方式总结:
通常建议使用
.post方法,这样可以有效的避免请求数据乱码,如果需要为Ajax请求出现错误做出响应需要使用
.
p
o
s
t
方
法
,
这
样
可
以
有
效
的
避
免
请
求
数
据
乱
码
,
如
果
需
要
为
A
j
a
x
请
求
出
现
错
误
做
出
响
应
需
要
使
用
.ajax方法
4、Json的表现形式
格式一:{"key1":value1,"key2":value2}
格式二:[o1,o2]
:Ajax代码:注意响应格式变为了json
**5、Ajax的返回值设置为Json格式**
实例
<script type="text/javascript">
//文本参数
$(function() {
$("#xsxx").click(function(){
$.post(
"myServlet1.do",
{"username":"张三123","password":"333"},
//"username=zs&password=123",
function(data) {
document.getElementById("xs1").innerHTML=data.username;
document.getElementById("xs2").innerHTML=data.password;
},
"json"
);
})
})
</script>
</head>
<body>
<button id="xsxx">显示信息</button><br/>
显示账号:<span id="xs1"></span><br/>
显示密码:<span id="xs2"></span><br/>
</body>
服务器端响应关键代码: