SSM 实训笔记 -07- 使用 jQuery Ajax 异步登录，并验证用户输入信息（maven）

短命女 2022-04-10 12:57 196阅读 0赞

### SSM 实训笔记 -07- 使用 jQuery Ajax 异步登录，并验证用户输入信息（maven） ###

本篇是对上一篇的项目的另一种实现加完善，上一篇 [SSM 实训笔记 -06- 从 MySQL 建库到 登录验证数据库信息（maven）][SSM _ -06- _ MySQL _ _maven]

**本篇内容：**  
（1）上一篇是使用同步的请求实现登录，并由 Servlet 决定登陆后下一步做哪些事情，本篇使用 jQuery Ajax 的方式，实现异步登录，登录成功后执行的内容在 js 中定义。  
（2）在登录之前，在 js 中验证表单中的，用户名是否为空，密码是否为空，密码是否是 6-12 位，登录失败后，返回提示信息。  
（3）登录成功后，返回用户表的所有信息，以表格形式展示：  
**（4）效果截图：**

![20190107130443460.gif][]

本篇部分内容看起来和上一篇相似，但又很多改动，请认真查看。

--------------------

### 一、建立用户信息 MySQL 数据库 ###

（建议名称一致，建库同上一篇，再介绍一次）

（1）安装 MySQL 请百度或参考：[MySQL 安装 + 入门大全 + 常用命令合集][MySQL _ _ _ _]

（2）打开 cmd ，登录 mysql 的 root 用户，创建 studb 数据库，创建表 tb\_user ：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70][]

（3）显示表结构，插入 3 条用户数据：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 1][]

（4）数据库 studb，表 tb\_user 创建好了。

### 二、创建 Maven Web 项目，配置 ###

（1）创建项目和修改目录结构，因为常用，所以写在了单独的一篇文章，请查看：[Spring 笔记 -05- 创建 Maven Web 项目 + Tomcat 及目录结构配置][Spring _ -05- _ Maven Web _ _ Tomcat]。

（2）序号（1）中说的，一篇文章，全部需要！

（3）配置 Maven 的配置文件 pom.xml 文件，位置在下面有提示：

**本篇多加一个 fastjson，请注意！！**

**请更新为下面的 pom 最新配置：**

<dependencies>
    	
        
        <dependency>
          <groupId>com.alibaba</groupId>
          <artifactId>fastjson</artifactId>
          <version>1.2.54</version>
        </dependency>
        
        <dependency>
          <groupId>junit</groupId>
          <artifactId>junit</artifactId>
          <version>4.11</version>
          <scope>test</scope>
        </dependency>
        
        <dependency>
          <groupId>javax.servlet</groupId>
          <artifactId>javax.servlet-api</artifactId>
          <version>4.0.1</version>
          <scope>provided</scope>
        </dependency>
        
        
        <dependency>
          <groupId>javax.servlet.jsp</groupId>
          <artifactId>javax.servlet.jsp-api</artifactId>
          <version>2.3.3</version>
          <scope>provided</scope>
        </dependency>
    
        
        <dependency>
          <groupId>mysql</groupId>
          <artifactId>mysql-connector-java</artifactId>
          <version>8.0.13</version>
        </dependency>
    
    
      </dependencies>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 2]

（4）点击自动导入：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 3][]

（5）创建如下目录及文件：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF][]

（6）下面需要先做一件事，就是在 js 目录中，引入 **Bootstrap3 和 jQuery**

**注意：只能是 Bootstrap3 版本：**

**配置步骤：**

*  安装 Node.js ，因为要使用 npm
 *  在项目中 js 目录，右键 Open in Explorer 可以打开该目录，并复制
 *  在 cmd 进入项目的 js 目录
 *  使用命令：

npm install bootstrap3

npm install jQuery

### 三、具体文件编码： ###

贴代码前，先看一下整个完整的项目目录结构：

**前台文件：**  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 4][]

**后台文件目录结构：**  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 5][]

**所有文件代码：**

（1）findUserInfoForAjax.html 文件，用于登录成功时跳转，该文件在浏览器打开时，js 会执行一个 findAllUser 方法，先请求 Servlet，然后 Servlet 去查询数据库信息，创 User 实体类，再转换成 json 数据格式，前端处理 json 数据，再显示在页面中：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>findUserInfoForAjax</title>
    
        <link rel="stylesheet" href="js/node_modules/bootstrap3/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="js/node_modules/bootstrap3/dist/css/bootstrap-theme.css">
        <script type="text/javascript" src="js/node_modules/jquery/dist/jquery.min.js"></script>
        <script>
            function findAllUser() { 
                $.ajax({ 
                    url:"userServletForAjax",
                    method:"get",
                    //dataType:"jsonp",
                    //async:true,
                    success:function (result) { 
                        var obj = JSON.parse(result);
                        var str = "";
                        $.each(obj,function (index,row,ee) { 
                            str+="<tr><td>"+row.id+"</td><td>"+row.uname+"</td><td>"
                                +row.upwd+"</td><td>"+row.lastLoginTime+"</td><td>"+row.role+"</td></tr>"
    
                        });
                        $("#alluser").html(str);
    
                    },
                    error:function () { 
                        alert("服务器请求失败")
                    }
                })
    
            }
            findAllUser();
        </script>
    
    </head>
    <body>
    <table class="table table-striped table-hover">
        <tr>
            <td>id</td>
            <td>uname</td>
            <td>upwd</td>
            <td>lastLoginTime</td>
            <td>role</td>
        </tr>
        <tbody id="alluser">
    
        </tbody>
    </table>
    </body>
    </html>

（2）login\_ajax.html 文件，是登录的前端界面，在请求 Servlet 之前，会先检查数据的格式，有用户名是否为空，密码是否为空，密码是否为 6-12 位。

当格式正确再去请求，验证数据库中的用户信息是否匹配，成功则跳转到上面的 findUserInfoForAjax.html 文件，不成功提示用户名或密码错误！：

**源代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>用户登录</title>
        <link rel="stylesheet" href="js/node_modules/bootstrap3/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="js/node_modules/bootstrap3/dist/css/bootstrap-theme.css">
        <script type="text/javascript" src="js/node_modules/jquery/dist/jquery.min.js"></script>
        <script type="text/javascript">
            function login() { 
                var uname = $("#uname").val();
                var upwd = $("#upwd").val();
                if (uname == null || uname == "") { 
                    $("#unameMsg").html("用户名不能为空!");
                    return;
                } else
                    $("#unameMsg").html("");
                if (upwd.length == 0) { 
                    $("#upwdMsg").html("密码不能为空!");
                    return;
                } else
                    $("#upwdMsg").html("");
                if (upwd.length < 6 || upwd.length > 12) { 
                    $("#upwdMsg").html("密码应该在 6-12 位之间!");
                    return;
                } else
                    $("#upwdMsg").html("");
                $.ajax({ 
                    url: "Servlet",
                    method: "get",
                    data: { 
                        "uname": $("#uname").val(),
                        "upwd": $("#upwd").val(),
                        "role": $("#role").val()
                    },
                    success: function (result) { 
                        if (result == "1") { 
                            window.location.href = "findUserInfoForAjax.html";
                        } else { 
                            $("#loginMsg").html("登录失败，请重试！");
                        }
                    },
                    error: function () { 
                        alert("请求服务器失败!");
                    }
                });
            }
    
        </script>
    
    </head>
    <body>
    <br><br>
    <br><br>
    
    <form name="loginForm" id="loginForm">
        <div class="center-block" style="width: 45%;height: 350px">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <span class="glyphicon glyphicon-apple"></span>用户登录
    
                </div>
                <div class="panel-body">
                    <div class="text-success" align="center">
                        <h3>欢迎使用资源统一管理系统</h3>
                    </div>
                    <div class="input-group">
                        <label class="input-group-addon">用户名</label>
                        <input class="form-control" type="text" id="uname" name="uname" placeholder="请输入用户名">
                        <label class="input-group-addon text-warning">*</label>
                    </div>
                    <label id="unameMsg" style="color: red"></label><br>
                    <div class="input-group">
                        <label class="input-group-addon">密   码</label>
                        <input class="form-control" type="password" id="upwd" name="upwd" placeholder="请输入密码">
                        <label class="input-group-addon text-warning">*</label>
                    </div>
                    <label id="upwdMsg" style="color: red"></label><br>
                    <div class="input-group">
                        <label class="input-group-addon">权   限</label>
                        <select name="role" class="form-control ">
                            <option value="admin">管理员</option>
                            <option value="teacher">经理</option>
                            <option value="student">用户</option>
                        </select>
                    </div>
                </div>
                <div align="center">
                    <label id="loginMsg" style="color: red"></label>
                    <a href="javascript:login()" class="btn btn-danger"><span
                            class="glyphicon glyphicon-log-in"></span> 登录</a>  
                    <a href="javascript:loginForm.reset()" class="btn btn-primary"><span
                            class="glyphicon glyphicon-remove"></span> 重置</a>
                </div>
                <br>
                <div class="panel-footer">
                    <div align="center">
                        ©2018-2019 肖朋伟的 CSDN 博客 Copy Right
    
                    </div>
    
                </div>
    
            </div>
    
        </div>
    </form>
    
    
    </body>
    </html>

如果成功引入 Bootstrap3 ，打开服务器，打开本页面，会有下面界面：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 6]

**（3）User.java 文件（有更新）：**

package com.pojo;
    
    //用来存放用户登录时，输入输出的信息
    public class User { 
        private int id;
    
        public int getId() { 
            return id;
        }
    
        public void setId(int id) { 
            this.id = id;
        }
    
        private String uname;
        private String upwd;
        private String lastLoginTime;
    
        public String getLastLoginTime() { 
            return lastLoginTime;
        }
    
        public void setLastLoginTime(String lastLoginTime) { 
            this.lastLoginTime = lastLoginTime;
        }
    
        private String role;
    
        public String getUname() { 
            return uname;
        }
    
        public void setUname(String uname) { 
            this.uname = uname;
        }
    
        public String getUpwd() { 
            return upwd;
        }
    
        public void setUpwd(String upwd) { 
            this.upwd = upwd;
        }
    
        public String getRole() { 
            return role;
        }
    
        public void setRole(String role) { 
            this.role = role;
        }
    
    
    }

**（4）UserDAO.java 文件（有更新）：**

package com.dao;
    
    import com.dbutil.DBUtils;
    import com.pojo.User;
    
    import java.util.List;
    
    public class UserDAO { 
    
        public List<User> findAllUser(){ 
            DBUtils dbUtils = new DBUtils();
    
            return dbUtils.findAllUser();
        }
    
        //返回 0 或 1
        public int login(User user){ 
            DBUtils dbUtils = new DBUtils();
    
            //与数据库是否匹配，匹配为 1
            int temp = dbUtils.login(user);
            return temp;
        }
    }

**（5）DBUtils.java 文件：  
！！！ 成败在与这个文件**

*  自行更改数据库名
 *  自行更改表名（两个）
 *  自行更改 root 的密码
 *  检查服务是否启动

package com.dbutil;
    
    import com.pojo.User;
    
    import java.sql.*;
    import java.util.ArrayList;
    import java.util.List;
    
    public class DBUtils { 
        Connection conn;
        //预处理
        PreparedStatement pstmt;
        //结果集
        ResultSet rs;
    
        public DBUtils(){ 
            try{ 
                Class.forName("com.mysql.cj.jdbc.Driver");
                conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/studb?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC","root","xiaopengwei");
    
            } catch (Exception e){ 
                e.printStackTrace();
            }
        }
    
        public int login(User user){ 
            try{ 
                pstmt=conn.prepareStatement("select * from tb_user where uname = ? and upwd = md5(?)");
                pstmt.setString(1, user.getUname());
                pstmt.setString(2, user.getUpwd());
                rs = pstmt.executeQuery();
                if (rs.next())
                    return 1;
                else
                    return 0;
            }catch (Exception e){ 
                e.printStackTrace();
            }
    
            return 0;
        }
    
        //查询数据库中 tb_user 表的所有信息
        public List<User> findAllUser() { 
            try { 
                String sql = "select * from tb_user";
                //预处理
                pstmt = conn.prepareStatement(sql);
                //执行查询
                rs = pstmt.executeQuery();
                //实例化
                List<User> list = new ArrayList<User>();
                while (rs.next()) { 
                    User user = new User();
                    user.setId(rs.getInt(1));
                    user.setUname(rs.getString(2));
                    user.setUpwd(rs.getString(3));
                    user.setLastLoginTime(rs.getString(4));
                    user.setRole(rs.getString(5));
                    list.add(user);
                }
                return list;
            } catch (Exception e) { 
                System.out.println(e.getMessage());
            }
            return null;
        }
    
    }

（6）Servlet.java 文件：

package com.loginServlet;
    
    import com.pojo.User;
    import com.service.UserService;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    import java.io.PrintWriter;
    import java.sql.PreparedStatement;
    
    @WebServlet(name = "Servlet",urlPatterns = "/Servlet")
    public class Servlet extends HttpServlet { 
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
            System.out.println("doPost");
            request.setCharacterEncoding("utf-8");
            //获取 post 请求中的两个参数
            String uname = request.getParameter("uname");
            String upwd = request.getParameter("upwd");
            String role = request.getParameter("role");
    
    
            /*硬编码, 不从数据库获取信息，直接验证 if (uname.equals("admin") && upwd.equals("123456")) { response.sendRedirect("index.jsp"); }else{ response.sendRedirect("loginServlet.html"); }*/
    
            //从服务获取值
            UserService userService = new UserService();
    
            User user = new User();
            user.setUname(uname);
            user.setUpwd(upwd);
            user.setRole(role);
    
            if (userService.login(user)) { 
    
                //向服务器要数据
    
    
                //登录成功跳转 index.jsp
                response.sendRedirect("index.jsp");
            }else{ 
                response.sendRedirect("failed.jsp");
            }
    
        }
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
    
            String uname = request.getParameter("uname");
            String upwd = request.getParameter("upwd");
            String role = request.getParameter("role");
            System.out.println("doGet");
            System.out.println(uname+":"+upwd+"-"+role);
            UserService userService = new UserService();
            User user = new User();
            user.setUname(uname);
            user.setUpwd(upwd);
            user.setRole(role);
            boolean login = userService.login(user);
            PrintWriter out = response.getWriter();
            if (login)
                out.print("1");
            else
                out.print("0");
            out.close();
        }
    }

（7）UserServletForAjax.java 文件：

package com.servlet;
    
    import com.alibaba.fastjson.JSON;
    import com.pojo.User;
    import com.service.UserService;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    import java.io.PrintWriter;
    import java.util.List;
    
    @WebServlet(name = "UserServletForAjax", urlPatterns = "/userServletForAjax")
    
    
    public class UserServletForAjax extends HttpServlet { 
        //什么都没有
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
    
            System.out.println("doPost");
        }
    
        //处理对 userServletForAjax 的 get 请求
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
    
            UserService userService = new UserService();
            List<User> allUser = userService.findAllUser();
            response.setContentType("text/html;charset=utf-8");
            PrintWriter out = response.getWriter();
            String jsonStr = JSON.toJSONString(allUser);
            out.print(jsonStr);
            out.close();
    
            System.out.println("doGet");
        }
    }

（8）UserService.java 文件：

package com.service;
    
    //服务层，给控制层提供服务
    
    import com.dao.UserDAO;
    import com.pojo.User;
    
    import java.util.List;
    
    public class UserService { 
    
        UserDAO dao = new UserDAO();
    
        //存用户数据
        public List<User> findAllUser(){ 
    
    
            return dao.findAllUser();
        }
    
        //参数，处理 User 对象，返回 True 或 False
        public boolean login(User user){ 
            int temp = dao.login(user);
            if (temp == 0)
                return false;
            else
                return true;
        }
    
    // DBUtils dbUtils = new DBUtils();
    
    
    }

### 四、运行调试 ###

![20190107130443460.gif][]

### 五、常见错误 ###

（1）MySQL 8.0 版本的 jdbc 个数据版本不匹配

（2）数据库服务没有运行

（3）配置文件数据库信息没有自行更改

（4）文件名自定义时，依赖失败

### 更多文章链接： ###

*  [Spring 笔记][Spring]

### 支持博主 ###

我正在参加 CSDN 2018 年博客之星评选，希望大家能支持我，  
我是【No. 001】号 肖朋伟 ，感谢大家宝贵的一票 ^\_^/  
投票地址：[https://bss.csdn.net/m/topic/blog\_star2018/index][https_bss.csdn.net_m_topic_blog_star2018_index]

[SSM _ -06- _ MySQL _ _maven]: https://blog.csdn.net/qq_40147863/article/details/85807384
[20190107130443460.gif]: /images/20220330/999a5013db53483094fd5f3c80a0d927.png
[MySQL _ _ _ _]: https://blog.csdn.net/qq_40147863/article/details/85685987
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70]: /images/20220330/2ed3881e054d48c3b51a002790b16294.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 1]: /images/20220330/985f11e4f79b4cbc8680756291cc1604.png
[Spring _ -05- _ Maven Web _ _ Tomcat]: https://blog.csdn.net/qq_40147863/article/details/85771619
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 2]: /images/20220330/768e27b8466b4cfa8b7d46cf614dcb4b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 3]: /images/20220330/8383ed95cc7e4ac7b2ae7beea556be13.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF]: /images/20220330/6489ed61b5384a789ec9a604e15b062e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 4]: /images/20220330/b9111bc804ca407d9534e764edd1f973.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 5]: /images/20220330/692ccb4483f3484e986ef863600d9123.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 6]: /images/20220330/f3c8a04f4e684d0dae41b3d34c0b6968.png
[Spring]: https://blog.csdn.net/qq_40147863/article/category/8577666
[https_bss.csdn.net_m_topic_blog_star2018_index]: https://bss.csdn.net/m/topic/blog_star2018/index