ajax实现用户登录校验和注册校验用户名是否存在
案例一：实现用户登录用ajax校验
如果是使用ajax异步提交表单，action属性可以不写，或者值为空
需求：
登录时用ajax判断名字和密码是否出错，如果出错并给出提示。出错的状况有：
- 没有输入用户名和密码
- 用户名密码错误
- 用户不存在
在项目中创建一个login.jsp代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<meta charset="UTF-8">
<title>登录title>
head>
<body>
<form action="#" method="post">
<p>账号：<input type="text" name="username" /><span id="userError">span>p>
<p>密码：<input type="password" name="password" />p>
<p>
<input type="submit" value="登录" />
p>
form>
body>
<script type="text/javascript">
let form = document.querySelector("form");
form.onsubmit = function(){
//获取表单数据
let username = document.querySelector("input[name='username']").value;
console.log(username);
let password = document.querySelector("input[name='password']").value;
console.log(password);
// 1. 创建ajax异步请求对象
var xhr = ajaxFunction();
//2. 准备发起post请求
//参数1：请求方法post、get
//参数2：请求地址
//参数3：是否异步
xhr.open('post','login',true);
// 3. 获取响应数据 注册监听的意思。 一会准备的状态发生了改变，那么就执行 = 号右边的方法
xhr.onreadystatechange = function(){
//前半段表示 已经能够正常处理。 再判断状态码是否是200
if(xhr.readyState == 4 && xhr.status == 200){
//弹出响应信息
console.log("请求完成");
//获取后台响应数据
let result = xhr.responseText;
console.log("后台响应的数据："+result);
handlerResp(result,username);
}
}
//4.设置请求头
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//5.添加post请求携带的数据，并真正发起请求
xhr.send("username="+username+"&password="+password);
//阻止表单提交
return false;
}
function handlerResp(result,username){
result = result.trim();//去除空格
var userError = document.getElementById("userError")
console.log('result:'+result+";type:"+(typeof result));
switch(result){
case "1":
location.href = 'main.jsp?user='+username;
break;
case "2":
userError.innerHTML = "用户名或密码不能为空！";
break;
case "3":
userError.innerHTML = "用户名或密码错误！";
break;
case "4":
userError.innerHTML = "用户不存在！";
break;
default:
break;
}
}
//创建异步请求对象
function ajaxFunction(){
var xmlHttp;
try{// Firefox, Chrome, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}catch(e){
try{// Internet Explorer（高版本）
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{// Internet Explorer（低版本）
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
}
}
}
return xmlHttp;
}
script>
html>
web中的配置
由于不做连接数据库进行真实的查询所以把一些参数配置到web.xml中
<context-param>
<param-name>zhangsanparam-name>
<param-value>123param-value>
context-param>
<context-param>
<param-name>lisiparam-name>
<param-value>666param-value>
context-param>
<context-param>
<param-name>cxkparam-name>
<param-value>999param-value>
context-param>
<welcome-file-list>
创建请求地址LoginServlet
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Enumeration;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.ServletConfig;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* 不做真实数据库查询，模拟登录操作
* @author
*
*/
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
Map<String, String> users = new HashMap<String, String>();
public static int STATUS_CODE_SUCCESS = 1; // 登录成功
public static int STATUS_CODE_NULL = 2; // 用户名或密码不能为空
public static int STATUS_CODE_ERROR = 3; // 用户名或密码错误
public static int STATUS_CODE_NOT_EXISTS = 4; // 用户不存在
@Override
public void init(ServletConfig config) throws ServletException {
ServletContext ctx = config.getServletContext();
Enumeration<String> params = ctx.getInitParameterNames();
while(params.hasMoreElements()) {
String username = params.nextElement();
System.out.println(username);
String password = ctx.getInitParameter(username);
System.out.println(password);
users.put(username, password);
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
// 设置响应类型和编码
resp.setContentType("text/html;charset=UTF-8");
// 获取输出对象
PrintWriter out = resp.getWriter();
String username = req.getParameter("username");
String password = req.getParameter("password");
if((username.trim()).equals("") || (password.trim()).equals("")) {
out.println(STATUS_CODE_NULL);
return;
}
if(!users.containsKey(username)) {
out.println(STATUS_CODE_NOT_EXISTS);
return;
}
if(!users.get(username).equals(password)) {
out.println(STATUS_CODE_ERROR);
return;
}
out.println(STATUS_CODE_SUCCESS);
}
}
在浏览器中输入访问地址页面显示如下
故意输错密码
输入不存在的用户
啥都不输入直接登录
输入正确的名字和密码
案例二：使用ajax注册校验用户名是否存在
需求：
当鼠标离开用户名框时给出提示看看该用户名是否可以注册
此时需要用到jquery.js和json架包
jquery.js
fastjson-1.2.58.jar
创建一个实体类
ResponseInfo.java见ajxa学习后面有这个类的代码
/**
* 通用响应数据对象
* @author
*
*/
public class ResponseInfo {
private Integer code;
private String msg;
//生成setterxx()和getter()方法
}
注册页面代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<meta charset="UTF-8">
<title>注册title>
<script type="text/javascript" src="js/jquery.js">script>
head>
<body>
<form action="#" method="post">
<p>账号：<input type="text" name="username" /> <span id="msg">span>p>
<p>真实姓名：<input type="text" name="realname" />p>
<p>电话：<input type="text" name="tel" />p>
<p>密码：<input type="password" name="password" />p>
<p>地址：<input type="text" name="addr" />p>
<p>
<input type="submit" value="注册" />
p>
form>
body>
<script type="text/javascript">
$("input[name='username']").on('blur',function(){
let formData = $("form").serialize();//序列表表格内容为字符串，用于 Ajax 请求。
$.ajax("registerServlet",{
type:'POST',//设置请求类型POST、GET
data:formData, // 设置请求参数，jQuery给做了统一封装，无论是GET请求还是POST，都是这样设置参数
dataType:'json',// 设置预期后台返回类型（可选），如果不设置，jQuery会根据响应头智能判断
success: handlerResp
});
});
// 登录回调函数
function handlerResp(result) {
console.log('result: ' + result+', type: ' + (typeof result));
// 这里拿到的result直接就是js对象，可以直接使用
let code = result.code;
console.log("code:"+code);
let msg = result.msg;
console.log("msg:"+msg);
if(code == 200) {
$("#msg").css('color', 'green').text(msg);
} else {
$("#msg").css('color', 'red').text(msg);
}
}
script>
html>
registerServlet代码
package com.lanou;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Enumeration;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.ServletConfig;
import javax.servlet.ServletContext;
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 com.alibaba.fastjson.JSON;
import com.lanou.bean.ResponseInfo;
/**
* 不做真实数据库查询，模拟注册操作
*/
@WebServlet("/registerServlet")
public class RegisterServlet extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
Map<String, String> users = new HashMap<String, String>();
@Override
public void init(ServletConfig config) throws ServletException {
ServletContext ctx = config.getServletContext();
Enumeration<String> params = ctx.getInitParameterNames();
while(params.hasMoreElements()) {
String username = params.nextElement();
String password = ctx.getInitParameter(username);
users.put(username, password);
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
//设置响应类型和编码
resp.setContentType("application/json;charset=UTF-8");
//获取输出对象
PrintWriter out = resp.getWriter();
String username = req.getParameter("username");
ResponseInfo result = new ResponseInfo();
if(!users.containsKey(username)) {
result.setCode(200);
result.setMsg("用户名可用");
} else {
result.setCode(500);
result.setMsg("该用户名已被注册");
}
//响应到浏览器
out.println(JSON.toJSONString(result));
}
}
可以看到lisi这个名已经在数据库中存在啦
当用户名与数据库（模拟的数据库就是web.xml中的数据）中的数据没有重名时就判断其可以注册
ajax我这只是比较浅，还需继续多练习！！最近毕业设计和答辩已经结束了，所以就没有那么多的事了，可以很好的安心的学习java，未来加油吧！因为疫情待在家里已经好几个月都没有出去了。说实话我真的想念学校的小街了，也想念我的同学们了。。。疫情求求你快点结束吧