利用ajax进行对用户名进行校验

最新推荐文章于 2023-05-07 16:04:19 发布

原创最新推荐文章于 2023-05-07 16:04:19 发布 · 494 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#用户名的验证

ajax 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用JSP和JavaScript实现的简单用户名验证过程。该示例通过客户端JavaScript发送AJAX请求到服务器端Servlet来检查用户名是否已被占用。文章详细展示了如何创建JSP页面、JavaScript脚本以及Java Servlet来完成这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、第一步先建立一个jsp的文件

然后进行编写一个HTML页面与那个js的外连接

<%@ 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">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/myJS.js"></script>
<title>Insert title here</title>
	<script type="text/javascript">
/* 		function ckName(){
			//获取用户名
			var name = document.getElementsByTagName("input")[0];
			//创建XMLHttpRequest对象
			var xhr = getXMLHttpRequest();
			//处理结果
			xhr.onreadystatechange = function(){
				if(xhr.readyState==4){//请求一切正常
					if(xhr.status==200){//服务器响应一切正常
						//alert(xhr.responseText);//得到响应结果
						var msg = document.getElementById("msg");
						if(xhr.responseText=="true"){
							msg.innerHTML =  "<font color='red'>用户名已存在</font>";
							//msg.innerText = "<font color='red'>用户名已存在</font>";
						}else{
							msg.innerHTML = "可以使用";
						}
					}
				}
			}
			
			//创建连接
			xhr.open("get","${pageContext.request.contextPath }/servlet/ckNameServlet?name="+name.value);
			//发送请求
			xhr.send(null);
		} */
		
		window.onload=function(){
			var nameElement = document.getElementsByName("userName")[0];
			nameElement.onblur = function(){
				var name = this.value;//this等价于nameElement
				//创建XMLHttpRequest对象
			var xhr = getXMLHttpRequest();
			//处理结果
			xhr.onreadystatechange = function(){
				if(xhr.readyState==4){//请求一切正常
					if(xhr.status==200){//服务器响应一切正常
						//alert(xhr.responseText);//得到响应结果
						var msg = document.getElementById("msg");
						if(xhr.responseText=="true"){
							msg.innerHTML =  "<font color='red'>用户名已存在</font>";
							//msg.innerText = "<font color='red'>用户名已存在</font>";
						}else{
							msg.innerHTML = "可以使用";
						}
					}
				}
			}
			
			//创建连接
			xhr.open("get","${pageContext.request.contextPath }/servlet/ckNameServlet?name="+name.value);
			//发送请求
			xhr.send(null);
			}
			
		}
	</script>
</head>
<body>
		用户名：<input type="text" name="userName" /><span id="msg"></span><br/>
		密码<input type="password" name="pwd"/><br/>
</body>
</html>

第二步还是要创建那个js的文件


function getXMLHttpRequest(){
	var xmlhttp;
		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		} else {// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		return xmlhttp;
}

第三步还是需要请求服务器然后返回数据的情况

package com.itheima.servlet;

import java.io.IOException;
import java.io.PrintWriter;

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

public class CkNameServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		PrintWriter out = response.getWriter();
		String name = request.getParameter("name");
		if("tom".equals(name)){
			out.print(true);
		}else{
			out.print(false);
		}
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}

}