Ajax,serlvet简单实现登录功能

1.所需工具Jquery

下载网址：www.jq22.com/jquery-info…

2.新建UserBean文件

package bean;

public class UserBean {
    private String username;
    private Integer id;

    public String getUsername() {
        return username;
    }

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

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getPassword() {
        return password;
    }

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

    private String password;

}

3.新建Dao层文件

IUserDao

package dao;

import bean.User;

import java.sql.SQLException;

public interface IUserDao {
    public boolean select(String sql) throws SQLException;
}

UserDao

package dao.impl;

import dao.IUserDao;
import utils.MysqlUtil;

import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

public class UserDao implements IUserDao {
    Connection con=null;
    Statement stm=null;
    ResultSet rs=null;
    @Override
    public boolean select(String sql)  {
        boolean result=false;
        try {
            con= MysqlUtil.getConnection();
            stm=con.createStatement();
            rs=stm.executeQuery(sql);
            if(rs.next()){
                result=true;
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            MysqlUtil.close(con);
            MysqlUtil.close(stm);
            MysqlUtil.close(rs);
        }
        System.out.println(result);
        return result;
    }
}

注：这里的数据库连接再之前的文章中有

4.新建service层文件

IUserService

package service;

import bean.User;

public interface IUserService {
    public boolean Login(User user);
}

UserService

package service.impl;

import bean.User;
import dao.impl.UserDao;
import service.IUserService;

import javax.swing.plaf.synth.SynthScrollBarUI;

public class UserService implements IUserService {
    UserDao dao=new UserDao();
    @Override
    public boolean Login(User user) {
        String username=user.getUsername();
        String password=user.getPassword();
        String sql=String.format("select * from test_user where name='%s' and password='%s'",username,password);
        boolean result=dao.select(sql);
        System.out.println(result);
        return result;
    }
}

5.新建Controller层文件

UserLogin

package controller;

import bean.User;
import service.impl.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.net.URLEncoder;
import java.sql.SQLException;
@WebServlet("/login")
public class UesrLogin extends HttpServlet {
    UserService service=new UserService();
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html");
        PrintWriter writer = resp.getWriter();
        String username=req.getParameter("username");
        System.out.println(username);
        String password=req.getParameter("password");
        User user=new User();
        user.setUsername(username);
        user.setPassword(password);
        boolean result=service.Login(user);
        if(result){
            writer.write("true");
        }else {
            writer.write("false");
        }

    }
}

6.由于前段代码过长，就选择性展示

	<form id="UserLogin">
						<input type="text" name="username" class="name_input" placeholder="请输入用户名">
						<input type="password" name="password" class="pass_input" placeholder="请输入密码">
						<div class="pwd_error" style="display: none">账户或者密码错误</div>
						<div class="more_input clearfix">
							<input type="checkbox" name="">
							<label>记住用户名</label>
							<a href="#">忘记密码</a>
						</div>
						<button  type="button" name="" value="登录" class="input_submit" onclick="User()" >登录</button>
					</form>

function User(){
		$.ajax({
			type: "post",
			url: "/login",
			dataType:"text",
			data: $('#UserLogin').serialize(),
			success: function (data) {
				if (data=="true") {
					window.location.href = "/index.jsp";
				}
				else{
					$(".pwd_error").css({"display":"inline"});
				}
			},
			error: function () {
				alert("系统异常，请稍后重试！");
			}


		})
	}

7.效果

当验证密码正确时，前段页面会跳转到主页，当验证密码错误时，被隐藏起来的div标签会显示，提示错误并不跳转。

初始：

密码正确：

密码错误：