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

于 2019-01-07 13:39:23 发布
阅读量1.0k 收藏 8
点赞数 4
分类专栏： # SSM 学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40147863/article/details/85999375
版权

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

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

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

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

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

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

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

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

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

（4）数据库 studb，表 tb_user 创建好了。

二、创建 Maven Web 项目，配置

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

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

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

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

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

<dependencies>
	<!-- 本篇多加一个 fastjson，请注意 -->
    <!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
    <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>
    <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>4.0.1</version>
      <scope>provided</scope>
    </dependency>
    
    <!-- https://mvnrepository.com/artifact/javax.servlet.jsp/javax.servlet.jsp-api -->
    <dependency>
      <groupId>javax.servlet.jsp</groupId>
      <artifactId>javax.servlet.jsp-api</artifactId>
      <version>2.3.3</version>
      <scope>provided</scope>
    </dependency>

    <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>8.0.13</version>
    </dependency>


  </dependencies>

在这里插入图片描述

（4）点击自动导入：

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

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

注意：只能是 Bootstrap3 版本：

配置步骤：

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

npm install jQuery

三、具体文件编码：

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

前台文件：

后台文件目录结构：

所有文件代码：

（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">密&nbsp;&nbsp;&nbsp;码</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">权&nbsp;&nbsp;&nbsp;限</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>&nbsp;&nbsp;
                <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">
                    &copy;2018-2019 肖朋伟的 CSDN 博客 Copy Right

                </div>

            </div>

        </div>

    </div>
</form>


</body>
</html>

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

在这里插入图片描述

（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();


}

四、运行调试

五、常见错误

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

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

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

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

更多文章链接：

支持博主

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

评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

肖朋伟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值