Ajax请求服务端的五种方式
- 方式一 （一般方式）
- 方式二（Get方式）
- 方式三（Post方式）
- 方式四（Load方式）
- 方式五（JSON方式）
首先要引入jQuery
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>下载jQuery：https://jquery.com/download/
方式一 （一般方式）
框架：
$.ajax({
url:“服务器地址“,
type:”get“|"post",
data:{请求数据},
success:function(result,testStatus){
//请求成功回调函数处理代码
},
error:function(xhr,errrorMessage,e){
//请求失败回调函数处理代码
}
});实现
index.jsp
function register()
{
var $mobile = $("#mobile").val();
$.ajax({
url:"MobileServlet",
请求方式:"post",
data:"mobile="+$mobile,
success:function(result,testStatus)
{
if(result == "true"){
alert("已存在！注册失败！");
}else{
alert("注册成功！");
}
},
error:function(xhr,errrorMessage,e){
alert("系统异常！");
}
});
}
<body>
手机：<input id="mobile"/>
<br/>
<input type="button" value="注册" onclick="register()" />
<span id="tip"></span>
</body>Servlet （下同）
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=UTF-8");
String mobile = request.getParameter("mobile") ;
//假设此时 数据库中 只有一个号码：18888888888
PrintWriter out = response.getWriter();
if("18888888888".equals(mobile)) {
out.write("true");//servlet以输出流的方式 将信息 返回给客户端
}else {
out.write("false");
}
out.close();方式二（Get方式）
框架
$.get(
服务器地址,
请求数据,
function (result){
},
预期返回值类型（string\xml）
);2、代码实现
$.get(
"MobileServlet",
"mobile="+$mobile,
function (result){
if(result == "true"){
alert("已存在！注册失败！");
}else{
alert("注册成功！");
}
}
);方式三（Post方式）
1、格式
$.post(
服务器地址,
请求数据,
function (result){
},
"xml" 或 "json" 或 "text"
);2、代码实现
$.post(
"MobileServlet",
"mobile="+$mobile,
function (result){
if(result == "true"){
alert("已存在！注册失败！");
}else{
alert("注册成功！");
}
},
"text"
);方式四（Load方式）
1、格式
$(xxx).load(
服务器地址,
请求数据
);
load:将服务端的返回值 直接加载到$(xxx)所选择的元素中2、代码实现
$("#tip").load(
"MobileServlet",
"mobile="+$mobile
);方式五（JSON方式）
1、格式
$.getJSON(
服务器地址,
JSON格式的请求数据,
function (result){
});
2、代码实现
var student = {"name":"zs" , "age":23} ;
var students =[
{"name":"zs" , "age":23} ,
{"name":"ls" , "age":24} ,
{"name":"ww" , "age":25}
];
alert(students[1].name +"--" +students[1].age) ;
$.getJSON(
"MobileServlet",
{"mobile":$mobile},
function (result){//msg:true|false
alert(123);
if(result.msg == "true"){
alert("已存在！注册失败！");
}else{
alert("注册成功！");
}
}
);
