ajax登陆（springmvc框架）

来源：互联网发布：湖南大学校园网域名编辑：程序博客网时间：2024/05/16 07:04

上周完成了一个web作业，登陆是用表单提交，后台验证，今天心血来潮，想写一个用Ajax提交的，也是自己第一次写Ajax。

什么是 AJAX？

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。

关于 jQuery 与 AJAX

jQuery 提供多个与 AJAX 有关的方法。

通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

提示：如果没有 jQuery，AJAX 编程还是有些难度的。

编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。

jQuery的ajax方法：

$.ajax({    url:'test.php',    type:'POST', //GET    async:true,    //或false,是否异步    data:{        name:'zhangsan',age:15    },    timeout:5000,    //超时时间    dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text    beforeSend:function(xhr){        console.log(xhr)        console.log('发送前')    },    success:function(data,textStatus,jqXHR){        console.log(data)        console.log(textStatus)        console.log(jqXHR)    },    error:function(xhr,textStatus){        console.log('错误')        console.log(xhr)        console.log(textStatus)    },    complete:function(){        console.log('结束')    }})

传入user对象到后台，后台查询用户登录信息是否存在

因为用的jQuery的ajax方法，需要先引入jQuery

<%--     Document   : logintest    Created on : 2017-10-28, 16:37:19    Author     : moulf--%><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%    String path = request.getContextPath();    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";%><!DOCTYPE html><html>    <head>        <base href="<%=basePath%>">        <meta charset="utf-8">        <meta http-equiv="X-UA-Compatible" content="IE=edge">        <meta name="viewport" content="width=device-width, initial-scale=1">        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->        <title>宿舍管理系统登录</title>        <!-- Bootstrap -->        <link rel="stylesheet" href="css/reset.css">        <link rel="stylesheet" href="css/supersized.css" />        <link rel="stylesheet" href="css/style.css">        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->        <!--[if lt IE 9]><script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script><script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]-->        <script type="text/javascript">            $(document).ready(function () {                //                  $(".login").click(function () {                    var username = $(".username").val();                    var pass = $(".password").val();                    var role = $(".role").val();                    var user = {                        username: username,                        password: pass,                        role: role                    };                    $.ajax({                        type: "post",                        url: "user/login",                        data: user,                        dataType: 'json',                        success: function (data) {                            if ("success" == data.result) {                                alert("登陆成功！")                                window.location.href = "index.jsp";                            } else {                                alert("密码错误，请确认后重新登录！");                            }                        },                        error: function () {                            alert("网络错误");                        }                    });                });            }            )        </script>     </head>    <body>        <div class="page-container">            <h1>宿舍管理系统登录</h1>            <form id="_ctl0" name="_ctl0" method="">                <input type="text" name="username" class="username" placeholder="账户">                <input type="password" name="password" class="password" placeholder="密码">                <select name="role" class="role">                    <option value="学生用户">学生用户</option>                    <option value="系统管理员">系统管理员</option>                </select>                <button type="button" class="login">登录</button>                <button type="button" onclick="javascript:window.location.href = '<%=basePath%>user/useradd';">学生用户注册</button>            </form>        </div>        <!-- Javascript -->        <script src="js/supersized.3.2.7.min.js"></script>        <script type="text/javascript" src="js/supersized-init.js" ></script>        <script src="js/scripts.js"></script>    </body></html>

后台接收传入的user对象，查询传入的数据跟数据库的数据是否匹配，如果有该用户返回json数据{result:success}，否则返回{result:error}

@RequestMapping("/login")    public void toLogin(User user, HttpServletRequest request, HttpServletResponse response) {        String result = "{\"result\":\"error\"}";        System.out.println(user.getUsername());        User bean = userService.selectBean(" where username='" + user.getUsername() + "' and password ='" + md5.EncoderByMd5(user.getPassword()) + "' and role='" + user.getRole() + "' ");        if (bean != null) {            HttpSession session = request.getSession();            session.setAttribute("manage", bean);              session.setAttribute("login", bean.getUsername());            result = "{\"result\":\"success\"}";        }        response.setContentType("application/json");        try {            PrintWriter out = response.getWriter();            out.write(result);        } catch (IOException e) {            e.printStackTrace();        }    }

完成的代码请参考点击打开链接

阅读全文

0 0