基于JAVA的Ajax与登录界面尝试（一）

最新推荐文章于 2023-02-20 09:30:26 发布

Armouy

最新推荐文章于 2023-02-20 09:30:26 发布

阅读量3.3k

点赞数 5

分类专栏：古早文章文章标签：前端

本文链接：https://blog.csdn.net/qq_34086980/article/details/78354510

版权

古早文章专栏收录该内容

3 篇文章 0 订阅

订阅专栏

背景：
尝试使用Ajax实现登录界面的异步验证，后台用的是servlet与JSP，数据库用的是Mysql

步骤：
1.在Mysql了中创建一个数据库名为：bookshop;数据表为：person;(别吐槽名字不规范…）

create database bookshop;
use bookshop;

create table person (
account varchar(10) not null primary key,
password varchar(10) not null ,
);

insert into person (account,password) values("sa","sa");

2.在eclipse中创建名字为Ajax2.0的项目工程，创建登录页面：login.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到登录页面</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <img src="img/cover6.gif"/>
    <h2 id="titleh2">书中自有黄金屋</h2>
    <div id="outer">
        <ul>
            <li><a href="login.html" class="active">登录</a></li>
            <li><a href="register.html">注册</a></li>
        </ul>

        <form id="myform" action="success.jsp" method="post">
            <label for="username">
                账户：<input type="text" name="username" id="username"/><img src="img/correct.png" />
            </label><br/>
            <label for="password">
                密码：<input type="password" name="password" id="password"/><img src="img/correct.png" />
            </label><br/>
            <button type="button" id="login">登录</button>
        </form>
    </div>
</body>
<script src="js/index.js"></script>
<script type="text/javascript">
    window.onload=function(){
        login();
    }
</script>
</html>

css样式省略；

3.在项目中建立一个beans包，在包中建立一个SqlCheak类，类中包含username、password、对应的getter和setter方法之外，还有一个ok变量，判断是否在数据库中存在账号信息，check()方法，调用checkSQL()方法，和返回OK变量，以及checkSQL()函数，实现连接数据库和检查账户密码是否存在于数据库中。

package beans;

import java.sql.DriverManager;
import java.sql.PreparedStatement;

import DAO.BaseDao;
import java.sql.ResultSet;

import com.mysql.jdbc.Connection;
import com.mysql.jdbc.Statement;


public class SqlCheck {
    private boolean ok=false;//状态变量
    private String username=null;
    private String password=null;
       private String name=null;
       private String pass=null;

       public boolean check()throws Exception{
           checkSQL(this.username,this.password);
           return this.ok;
       }

       //查询数据库，如果数据库没有这个用户就把状态变量设置为false，如果有则设置为true
      private void checkSQL(String name,String pass) throws Exception{
                Class.forName("com.mysql.jdbc.Driver");
                String url="jdbc:mysql://localhost:3306/bookshop?user=root&password=123456&characterEncoding=UTF-8";
                Connection con=(Connection) DriverManager.getConnection(url);
                Statement st=(Statement) con.createStatement();
                ResultSet rs=st.executeQuery("select * from person where account='"+name+"' and password='"+pass+"'");
            if(rs.next()){//表示有记录
                       this.ok=true;

                    }else{
                       this.ok=false;
                    }
       }


    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

4.创建一个名字为servlet的包，包中建立一个名字为check的servlet类，由于ajax调用的是check类中的doget()方法，所以只要修改deget()的方法即可：

package servlet;

import java.io.IOException;
import java.io.PrintWriter;

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 javax.servlet.http.HttpSession;

import beans.SqlCheck;

/**
 * Servlet implementation class Check
 */
@WebServlet("/Check")
public class Check extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public Check() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取客户端请求的参数，并进行判断。
        //如果用户存在，返回一个长度为2的字符串，如果用户不存在返回一个长度为1的字符串。
        HttpSession session = request.getSession(); 
        PrintWriter out = response.getWriter();
        String username=request.getParameter("username");//取得用户名参数
        String password=request.getParameter("password");//取得用户密码参数
        SqlCheck sc=new SqlCheck();
        sc.setUsername(username);//为JavaBean设置username属性
        sc.setPassword(password);// 为JavaBean设置password属性
        try{
             if(sc.check()){  //如果用户存在
                 out.print("success");  //返回"success"的一个字符串
                 session.setAttribute("username", username);//将username的值存放在一个名字为"username"的变量中
                 }else{
                out.print("fail");  //返回"fail"的一个字符串
                 }
        }catch(Exception e){
            out.print(e.toString());
        } 
        out.flush();
        out.close();
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}

5.设置为servelt之后，需要修改web.xml文件，该文件在WebContent->WEB-IEF中，如果找不到可以新建一个~

这里写图片描述

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name>Ajax2.0</display-name>
  <servlet-mapping>
    <servlet-name>check</servlet-name>
    <url-pattern>/check</url-pattern>
  </servlet-mapping>
  <servlet>
    <servlet-name>check</servlet-name>
    <servlet-class>servlet.Check</servlet-class>
  </servlet>
</web-app>

（即将servlet包中的Check类命名为check，若点击/check链接，将调用check这个类，即该类中的方法）

6.建立一个success.jsp，实现跳转成功提示

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
登陆成功
<%
    request.setCharacterEncoding("UTF-8"); 
    //两种获得username的方法
    String username=request.getParameter("username");
    String u=(String) session.getAttribute("username");

%>
<%=username %>
<%=u %>
</body>
</html>

7.index.js文件中关于表单的验证和ajax方法的使用

//若为空
function isEmpty(id){
    id.setAttribute("placeholder","不能为空");
};
//将对的标签改为错的标签
function seterror(node){
    node.nextSibling.setAttribute("src","./img/error.png");
};
//显示判断后的结果
function showTip(node){
    node.nextSibling.setAttribute("class","show");
};

//登录函数
function login(){
    var btn=document.getElementById("login");
//  var flag=false;
    btn.onclick=function(){
            var username=document.getElementById("username");
            var password=document.getElementById("password");
            //判断用户名是否为空
            if(username.value.length<=0){
                isEmpty(username);
                seterror(username);

            }
            //判断密码是否为空
            if(password.value.length<=0){
                isEmpty(password);
                seterror(password);

            }
            //调用函数
            useLoginAjax();
            showTip(username);
            showTip(password);
    };
};

//Ajax调用
function useLoginAjax() {
    var request = false;
    if (window.ActiveXObject) { // 调用创建XMLHttpRequest对象的方法
        request = new ActiveXObject("Microsoft.XMLHTTP");
    } else if (window.XMLHttpRequest) {
        request = new XMLHttpRequest(); // IE7+,Firefox,Chrome,Opera,Safari
    }
    var myform = document.getElementById("myform");
    var username = myform.username.value;
    var password = myform.password.value;
    request.onreadystatechange = function() {
        if (request.readyState == 4) {
            if (request.status == 200) {
                var str = request.responseText;
                if (str == "fail") {
                    var password = document.getElementById("password");
                    password.value = "";
                    password.setAttribute("placeholder", "密码错误！");
                    password.nextSibling.setAttribute("src", "./img/error.png");
                    alert("密码错误！");
                } else {
                    //button转化为subimit按钮
                    document.forms[0].submit();
                }
            }
        }
    };

    //还记得web.xml配合的/check么？
    var url = "check?username=" + username + "&password=" + password;
    request.open("get", url);
    request.setRequestHeader("ContentType",
            "application/x-www-form-urlencoded;charset=UTF-8");
    request.send(null);    
};