Ajax实现局部刷新

我们想要用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"));
复制代码