使用ajax和jQuery检验用户名是否可用（局部刷新）

最新推荐文章于 2022-01-13 18:01:14 发布

何同学。

最新推荐文章于 2022-01-13 18:01:14 发布

阅读量272

点赞数

分类专栏： Java学习文章标签： ajax 异步提交表单上传文件 servlet

本文链接：https://blog.csdn.net/qq_45100706/article/details/107244530

版权

Java学习专栏收录该内容

25 篇文章 2 订阅

订阅专栏

通过ajax刷新局部内容。实现效果如下：当移开用户名的输入框，查询数据是否存在该用户名
在这里插入图片描述

1、使用ajax检验用户名是否可用

前端：

<%@ 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>
<script type="text/javascript">
	function ajaxFunction(){
		var xmlhttp;
		if (window.XMLHttpRequest){
		  xmlhttp=new XMLHttpRequest();
		}else{
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		return xmlhttp;
	}
	function checkUserName(){
		//获取输入框的值
		var name=document.getElementById("name").value;
		
		//1、创建ajax对象
		var xmlhttp=ajaxFunction();
		//2、通过ajax发送请求(获取输入框的name值传给服务器)
		xmlhttp.open("POST","checkUserNameServlet",true);
		//3、获取服务器返回的结果
		xmlhttp.onreadystatechange=function()
		{
		if(xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			var text=xmlhttp.responseText;
			//4、根据结果进行判断，把判断结果拼接到span标签里
			if(text==1){//用户名存在,不可用
				document.getElementById("nameSpan").innerHTML="<font color='red'>用户名已存在</font>";
			}else{//用户名不存在，可用
				document.getElementById("nameSpan").innerHTML="<font color='green'>用户名可用</font>";
			}			
			}
		}
		/*将参数发送给服务器*/
		xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xmlhttp.send("name="+name)
	} 
</script>
</head>
<body>
<table border="1" width="500px">
	<tr>
		<td>用户名：</td>
		<td>
			<input type="text" name="name" id="name" οnblur="checkUserName()">
			<span id="nameSpan"></span>
		</td>
	</tr>
	<tr>
		<td>密码：</td>
		<td><input type="text" name=""></td>
	</tr>
</table>
</body>
</html>

后端：


import java.io.IOException;
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 cn.goktech.Dao.UserDao;
import cn.goktech.Dao.impl.UserDaoImpl;


@WebServlet("/checkUserNameServlet")
public class checkUserNameServlet extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=utf-8");
		//获取ajax发送过来的参数
		String name = request.getParameter("name");
		UserDao userDao=new UserDaoImpl();
		boolean b=userDao.findUserByName(name);
		if (b) {//表用户名存在，不可用
			response.getWriter().println(1);
		} else {//表用户名可用
			response.getWriter().println(2);
		}
		System.out.println(b);
	}
	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

2、使用JQuery&Ajax校验用户名是否可用

前端：

<%@ 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>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
	function checkUserName(){
		//1.获取输入框的值
		var name=$("#name").val();
		//2.发送请求
		$.post("checkUserNameServlet",{name:name},function(data,status){
			if(data==1){
				//用户存在
				$("#nameSpan").html("<font color='red'>用户名已被注册</font>");
			}else{
				//用户不存在
				$("#nameSpan").html("<font color='green'>用户名可用</font>");
			}
		})
	} 
</script>
</head>
<body>
<table border="1" width="500px">
	<tr>
		<td>用户名：</td>
		<td>
			<input type="text" name="name" id="name" onblur="checkUserName()">
			<span id="nameSpan"></span>
		</td>
	</tr>
	<tr>
		<td>密码：</td>
		<td><input type="text" name=""></td>
	</tr>
</table>
</body>
</html>