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

最新推荐文章于 2021-08-06 22:20:13 发布

何同学。

最新推荐文章于 2021-08-06 22:20:13 发布

阅读量350

点赞数

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

本文链接：https://blog.youkuaiyun.com/qq_45100706/article/details/107244530

版权

通过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

最低0.47元/天解锁文章