首页手记使用ajax实现页面局部刷新

使用ajax实现页面局部刷新

标签：

Java Html/CSS JQuery

简述

网页局部刷新功能在web网站上已经屡见不鲜了，如即时新闻信息，股票信息等，都需要不断获取最新信息。在传统的web实现方式中，想要实现类似的效果，必须进行整个页面的刷新，在网络速度受到一定限制的情况下，这种因为一个局部变动而牵动整个页面的处理方式显得有些得不偿失。Ajax技术的出现很好的解决了这个问题，利用Ajax技术可以实现网页的局部刷新，只更新指定的数据，并不更新其他的数据。本文以登录案例来介绍一下ajax的使用。

登录html关键代码

<body>
    账号：<input type="text" name="username"> 
    密码：<input type="text" name="password">
    <button id="btn_login">登录</button>
</body>

解析：在传统的项目中提交表单数据到后台，我们都是使用 form 表单进行的，此时使用ajax技术我们将抛弃以往的form提交方式。

ajax关键代码

<script type="text/javascript">
    $("#btn_login").click(function() {
        $.ajax({
            url : "login.do",
            type : "post",
            data : {
                username : $("input[name=username]").val(),
                password : $("input[name=password]").val()
            },
            dataType : "json",
            success : function(result) {
                var flag = result.flag;
                if (flag == true) {
                    alert("密码正确！");
                } else {
                    alert("密码错误！");
                }
            }
        });
    });
</script>

解析：使用ajax技术我们需要依靠jQuery,所以在使用ajax的使用我们需要引入jQuery的包

ajax语法特点

url：请求地址
type：传递方式(get/post)
data：用来传递的数据
success：交互成功后要执行的方法
dataType：ajax接收后台数据的类型

servlet关键代码

protected void doPost(HttpServletRequest req, HttpServletResponse resp) 
            throws ServletException, IOException {
        //获取用户名和密码
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        //创建json对象
        JSONObject jsonObject = null;
        if ("root".equals(username) && "123456".equals(password)) {
            jsonObject = new JSONObject("{flag:true}");
        } else {
            jsonObject = new JSONObject("{flag:false}");
        }
        //将数据返回给ajax
        resp.getOutputStream().write(jsonObject.toString().getBytes("utf-8"));
    }

解析：如图我们将用户名设置为 root ,密码设置为123456，如果用户输入的跟设置的一致将提示密码正确，否则提示密码错误！