ajax action 用户名异步验证

最新推荐文章于 2025-08-20 15:09:39 发布

beginya

最新推荐文章于 2025-08-20 15:09:39 发布

阅读量735

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： ajax

本文链接：https://blog.youkuaiyun.com/beginya/article/details/23106215

web前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个结合JSP和Ajax技术实现的简单用户名验证系统。通过Ajax发送异步请求到服务器端JSP页面，检查用户名是否已被使用。文章展示了完整的JSP页面代码和部分后端验证逻辑。

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

jsp 页面

<%@ 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 'Ajax.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">
	-->
<script type="text/javascript">
var request = false; 
var flag;  
function createXMLHttpRequest(){ 
   
	try {
			request = new XMLHttpRequest();
		} catch (trymicrosoft) {
			try {
				request = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (othermicrosoft) {
				try {
					request = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (failed) {
					request = false;
				}
			}
		}
	}

	function getCustomerInfo() {
		createXMLHttpRequest();
		alert(request);
		var phone = document.getElementById("userName").value;
		alert(phone);
		var url = "loginActionloginTest?user.userName="+phone;
		request.open("GET", url, true);
		request.onreadystatechange = updatePage;
		request.send(null);
		document.getElementById("msg").innerHTML = "正在验证……";
	}

	function updatePage() {
		if (request.readyState == 4) {
			if (request.status == 200) {
				var text = request.responseText;// 接收返回内容 
				alert(text);
				if(text=="true"){
				flag = true; //可以提交表单
				document.getElementById("msg").innerHTML = "<font color='green'>恭喜您，该用户名可用!</font>";
				}else{
				 flag = false;//不可以提交表单
				document.getElementById("msg").innerHTML = "<font color='red'>该用户名已被使用，请您重新选择用户名！</font>";
				}
			} else {
				alert("status is " + request.status);
			}
		}

	}
	function checkForm(){   // 对表单判断能否进行提交操作  
        return flag;  
    }  
</script>
  </head>
  
  <body>
   <form action="" method="post" onsubmit="">
   <input type="text" id="userName" name="user.name" onblur="getCustomerInfo()"><span id="msg"></span>
   <input type="submit" value="注册">  
   <input type="reset" value="重置">  
   </form>
  </body>
</html>

action.jsp

   @Action(
    		value="loginActionloginTest"
    		)
    public void loginTest() throws IOException{
    	try {
			String str= new String(user.getUserName().toString().getBytes("iso8859-1"), "utf-8");
    		//String str= java.net.URLDecoder.decode(user.getUserName(), "UTF-8");
			System.out.println("asasasasasasas"+str);
	    	User usern = loginService.find(str);
	    	System.out.println("asasasasasasas"+usern);
	    	response=(HttpServletResponse) ActionContext.getContext().get(ServletActionContext.HTTP_RESPONSE);
	    	PrintWriter out = response.getWriter();
	    	if(usern==null){
	    		
	    		out.print("true");
	    	}else{
	    		out.print("false");
	    	}
	    	out.flush();
	    	out.close();
		} catch (UnsupportedEncodingException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}