@TOC
首先要引入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("注册成功!");
}
}
);