ajax实现用户登录校验和注册校验用户名是否存在 |
您所在的位置：网站首页 › 微博登录时显示该用户不存在 › ajax实现用户登录校验和注册校验用户名是否存在 |
ajax实现用户登录校验和注册校验用户名是否存在
|
案例一：实现用户登录用ajax校验
如果是使用ajax异步提交表单，action属性可以不写，或者值为空 需求： 登录时用ajax判断名字和密码是否出错，如果出错并给出提示。出错的状况有： 没有输入用户名和密码用户名密码错误用户不存在 在项目中创建一个login.jsp代码如下： 登录 账号： 密码： 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; } web中的配置由于不做连接数据库进行真实的查询所以把一些参数配置到web.xml中 zhangsan 123 lisi 666 cxk 999 创建请求地址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 users = new HashMap(); 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 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); } }在浏览器中输入访问地址页面显示如下 需求： 当鼠标离开用户名框时给出提示看看该用户名是否可以注册 此时需要用到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()方法 } 注册页面代码 注册 账号： 真实姓名： 电话： 密码： 地址： $("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); } } 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 users = new HashMap(); @Override public void init(ServletConfig config) throws ServletException { ServletContext ctx = config.getServletContext(); Enumeration 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，未来加油吧！因为疫情待在家里已经好几个月都没有出去了。说实话我真的想念学校的小街了，也想念我的同学们了。。。疫情求求你快点结束吧【本文地址】
今日新闻 |
推荐新闻 |