用户名校验ajax代码

最新推荐文章于 2022-12-10 10:45:33 发布

fachew

最新推荐文章于 2022-12-10 10:45:33 发布

阅读量246

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/fachew/article/details/97614364

版权

笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

功能：
用户名是否被占用
思路：
1.用户书写用户名信息，在失去焦点时进行用户名校验
2.失去焦点发送请求到服务器，服务器根据用户名信息去数据库中查询用户名是否存在
3.将校验结果响应给浏览器
4.在当前页面，也就是用户名输入框后面显示响应结果
技术：
使用ajax技术

一、V层

js：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'reg.jsp' starting page</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">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<!-- 声明js代码域 -->
	<script type="text/javascript">
	//声明用户名校验函数
	function checkUname(){
		//获取用户名信息
		var uname=document.getElementById("uname").value;
		//创建ajax引擎对象
		var ajax;
		if(window.XMLHttpRequest){
			ajax=new XMLHttpRequest();
		}else if(window.ActiveXObject){
			ajax=new ActiveXObject("Msxml2.XMLHTTP");
		}
		//声明监听事件
		ajax.onreadystatechange=function(){
			//判断ajax状态码
			if(ajax.readyState==4){
				//判断响应状态码
				if(ajax.status==200){
					//获取响应数据(普通字符串或josn格式字符串)
					var data=ajax.responseText;
					//处理响应数据
					if(eval(data)){
						//获取span对象
						var span=document.getElementById("unameSpan");
						//设置span填充颜色
						span.style.color="red";
						//将数据显示填充到span中
						span.innerHTML="用户名已经被注册";
					}else{
						//获取span对象
						var span=document.getElementById("unameSpan");
						//设置span填充颜色
						span.style.color="green";
						//将数据显示填充到span中
						span.innerHTML="用户名可以使用";
					}
					
				}
				
			}
			
		}
		//创建并发送请求
		//创建请求
		ajax.open("get","data?uname="+uname);
		//发送请求
		ajax.send(null);
	}
	
	
	</script>
  </head>
  
  <body>
    用户名：<input type="text" name="uname" value="" id="uname" onblur="checkUname()" /><span id="unameSpan"></span>
  </body>
</html>

注：为方便后期修改，建议把innerHTML的内容设置放在js中

	if(eval(data)){
						//获取span对象
						var span=document.getElementById("unameSpan");
						//设置span填充颜色
						span.style.color="red";
						//将数据显示填充到span中
						span.innerHTML="用户名已经被注册";
					}else{
						//获取span对象
						var span=document.getElementById("unameSpan");
						//设置span填充颜色
						span.style.color="green";
						//将数据显示填充到span中
						span.innerHTML="用户名可以使用";
					}

二、C层

DataServlet

package com.facai.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.facai.service.DataService;
import com.facai.service.impl.DataServiceImpl;

public class DataServlet extends HttpServlet {
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		//设置请求编码格式
		req.setCharacterEncoding("utf-8");
		//设置响应编码格式
		resp.setContentType("text/html;charset=utf-8");
		//获取请求信息
		String uname=req.getParameter("uname");
		//处理请求信息
			//获取业务层对象
		DataService ds=new DataServiceImpl();
			//校验用户信息
		boolean flag=ds.checkUnameInfoService(uname);
		//响应处理结果
		if(flag){
			resp.getWriter().write("true");
		}else{
			resp.getWriter().write("false");
		}
	}
}

三、M层

1.业务层：
DataService接口

package com.facai.service;

public interface DataService {
	//校验用户名是否被注册
	boolean checkUnameInfoService(String uname);

}

DataServiceImpl.class

package com.facai.service.impl;

import javax.servlet.http.HttpServlet;

import com.facai.dao.DataDao;
import com.facai.dao.impl.DataDaoImpl;
import com.facai.service.DataService;

public class DataServiceImpl implements DataService {
	//创建Dao层对象
	DataDao dd=new DataDaoImpl();
	//校验用户名是否被注册
	@Override
	public boolean checkUnameInfoService(String uname) {
		return dd.checkUnameInfoService(uname);
	}

}

2.处理层：
DataDao接口

package com.facai.dao;

public interface DataDao {
	//查询用户名是否存在
	boolean checkUnameInfoService(String uname);

}

DataDaoImpl.class

package com.facai.dao.impl;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

import com.facai.dao.DataDao;
import com.facai.util.DBUtil;

public class DataDaoImpl implements DataDao {
	//查询用户名是否存在 select * from t_user where uname=?
	@Override
	public boolean checkUnameInfoService(String uname) {
		//声明jdbc变量
		Connection conn=null;
		PreparedStatement ps=null;
		ResultSet rs=null;
		//声明变量
		boolean flag=false;
		try {
			//创建连接
			conn=DBUtil.getConnection();
			//创建SQL命令
			String sql="select * from t_user where uname=?";
			//创建SQL行命令对象
			ps=conn.prepareStatement(sql);
			//给占位符赋值
			ps.setString(1, uname);
			//执行
			rs=ps.executeQuery();
			//遍历
			if(rs.next()){
				flag=true;
			}
		} catch (Exception e) {
			e.printStackTrace();
		}finally{
			//关闭资源
			DBUtil.closeAll(rs, ps, conn);
		}

		//返回
		return flag;
	}

}

四、运行图

在这里插入图片描述

fachew

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用户名校验ajax代码

功能：用户名是否被占用思路：1.用户书写用户名信息，在失去焦点时进行用户名校验2.失去焦点发送请求到服务器，服务器根据用户名信息去数据库中查询用户名是否存在3.将校验结果响应给浏览器4.在当前页面，也就是用户名输入框后面显示响应结果技术：使用ajax技术一、V层js：<%@ page language="java" import="java.util.*" pageEn...
复制链接

扫一扫