我们想要用Ajax局部刷新,需要以下几个步骤:
首先,我们需要获取实现刷新的元素,比如input元素,并在该元素上出发事件,比如触发click事件。
想要获得元素,就得知道获得元素的方法,Ajax获得元素的方法有很多种,具体可查看Ajax的API,常用的获得id和class的方法是:
//获得有id元素的方法
$("#id")
//获得由class元素的方法
$(".class")
复制代码
我们获取登录按钮所在的元素input,并在该元素上面触发点击事件
$("#login").click(function(){});
复制代码
其次,我们触发的是Ajax事件,触发该事件需要几个属性。
第一个属性就是url,这个属性表示的意思就是我们请求的是哪一个资源
第二个属性就是type,这个属性表示的是我们的请求类型
第三个属性是data,这个属性表示的是我们请求时需要带去的值
第四个属性是dataType,这个属性表示的是返回时的数据类型,一般为json
第五个属性是success,这个属性表示的是接收返回的值
$("#login").click(function(){
$.ajax({
//url表示我们请求的是哪一个资源,一般是一个Servlet,属性之间用“,”隔开
url:"<%basePath%>/LoginServlet",
//请求类型
type:"post",
//需要带去的值,带去的时候要先获取这个元素的值
data:{
username:$("input[name=username]"),
password:$("input[name=password]")
},
//返回的数据类型
dataType:"json",
//接收返回的值,返回的值存在result中
success:function(result){
var flag = result.flag;
if(flag){
//如果返回的正确,我们就跳转到登录成功页面
window.location.g=href="<%basePath%>/pages/front/success.jsp";
}else{
//如果失败,我们我要跳回登录界面,并给用户友好的提示
$(".tip").text("您输入的用户名或者密码错误");
}
}
});
});
复制代码
我们在接收返回的值之前,我们需要在LoginServlet中获取需要返回的值
如果用户名和密码输入正确,我们需要将flag设置为true
JSONObject jsonObject = new JSONObject("{flag:true}");
复制代码
如果输入错误,我们需要将flag设置为false
JSONOBject JSONObject = newJSONObject("{flag:flase}");
复制代码
然后我们需要将值返回,返回的时候我们需要调用response的方法
response.getOutputStream().getWrite(jsonObject.toString().getByte("UTF-8"));
复制代码