【基于Java+Servlet+Ajax+Javascript+tomcat+MySQL的信息管理系统的登录功能用户名校验】

基于Java+Servlet+Ajax+Javascript+tomcat+MySQL的信息管理系统的登录功能用户名校验

紧接上一篇文章，把用户登录功能改为Ajax用户名校验。

目录

1.JSP

在这里插入图片描述

1.1Login.jsp

<%
    request.setCharacterEncoding("UTF-8");
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
</head>
<link rel="stylesheet" href="CSS/login.css" type="text/css">
<body>
<section>
    <div class="box">
        <!-- 背景圆 -->
        <div class="circle" style="--x:0"></div>
        <div class="circle" style="--x:1"></div>
        <div class="circle" style="--x:2"></div>
        <div class="circle" style="--x:3"></div>
        <div class="circle" style="--x:4"></div>
        <!-- 登录框 -->
        <div class="container">
            <div class="form">
                <h2>登录</h2>
                <form method="post" enctype="application/x-www-form-urlencoded" action="User1Servlet">
                    <div class="inputBox">
                        <input type="text" placeholder="用户名" name="username" id="username">

                    </div>
                    <div class="inputBox">
                        <input type="password" placeholder="密码" name="userpassword" id="userpassword">

                    </div>
                    <div class="inputBox">
                        <input type="button" value="登录" id="checkuser">

                    </div>
                    <p class="forget">状态：<span id="checkspan"></span></p>
                    <p class="forget">没有账户?<a href="index.jsp">
                        注册
                    </a></p>
                </form>
            </div>
        </div>
    </div>
</section>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
</body>
</html>

2.Ajax

Ajax验证的过程一般需要验证两部分：
1 .验证ajax的状态，通过 readyState 状态码（0-4）来验证 ：

0 表示未初始化，还没有调用open方法
1 表示已经初始化，但是没有发送请求，即没有调用send方法，即正在加载
2 表示加载完毕，send已经被调用，请求开始
3 代表交互中，服务器正在发送响应
4 代表交互完成

2 . 验证返回的状态码是否为200或者304

404 没有找到页面
403 禁止访问
500 访问出错
200 一切正常
304 源文件没有被修改

2.1JavaScript

<script language="JavaScript">
    window.onload = function() {
//通过id获取页面button的onclick点击事件
        document.getElementById("checkuser").onclick = function() {
            var username = document.getElementById("username").value;
            //1.创建ajax对象
            var xhr = ajaxFunction();
            xhr.onreadystatechange = function() {
                //处理后台返回的数据
                if(xhr.readyState == 4) {
                    if(xhr.status == 200) {
                        var data= xhr.responseText;
                        document.getElementById("checkspan").innerHTML = data;
                        window.confirm(data);
                    }
                }
            }
            //规定发送数据的形式（post/get），url，以及传输方式(同步/异步)
            xhr.open("post","./User1Servlet?timeStamp="+new Date().getTime(),true);
            //post方式需要加下边这句，get方式不需要
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            //将页面输入数据发送到后台
            xhr.send("username="+username);
        }
    }

    function ajaxFunction() {
        var xmlHttp;
        try {
            xmlHttp = new XMLHttpRequest();
        } catch(e) {
            try {
                xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");
            } catch(e) {
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch(e) {}
            }
        }
        return xmlHttp;
    }
</script>

3.Servlet

传入的数据与数据库的数据进行匹配，作出回应。

3.1User1Servlet

import USEjava.User;
import USEjava.UserDao;

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.ArrayList;

@WebServlet(name = "User1Servlet")
public class User1Servlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {


        response.setContentType("text/html;charset=UTF-8");
        //定义输出流
        PrintWriter out = response.getWriter();
        //获取前端页面输入数据
        String username = request.getParameter("username");
        //存取数据库数据
        ArrayList<User> alu=UserDao.getAllUser();
        //进行比较并作出响应。
        int flag=0;
        String str=null;
        if(username!=null&& !username.equals("")){
            for(User user:alu){
                if(user.getUsername().equals(username)){
                    flag=1;
                    break;
                }else{
                    flag=0;
                }
            }
            if(flag==1){
                out.println("用户已存在");
            }else{
                out.println("用户未存在");
            }
        }else {
            out.println("请输入正确完整信息");
        }
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

    }
}

本篇文章紧接上一篇，谢谢大家的嗲点赞。

版权声明：本文为weixin_55987175原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。