ajax对用户名的判断_注册页面判断用户名存在的代码是什么ajax-CSDN博客

本文链接：https://blog.csdn.net/qq_52076808/article/details/126269227

Ajax在注册用户时对用户名进行判断是否存在

1.创建一个VerifyUsernameServlet类

@WebServlet("/VerifyUsernameServlet")
public class VerifyUsernameServlet extends HttpServlet {

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//	System.out.println("achaoihdoiha");
		//对用户名进行判读
	String username = request.getParameter("username");
	UserService userService=new UserService();
	boolean isExist=true;
	try {
		User user=userService.selectByname(username);
		if(user==null) {
			isExist=false;
		}
		//因为json数据接收时默认前面一部分为string类型所以用\"\"框住防止出错
		response.getWriter().append("{\"isSuccess\":"+!isExist+"}");
	} catch (Exception e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	}
	}

}

2.对注册页面进行修改

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
//   等鼠标离开姓名框时调用verifyUsername方法
	$("input[name='username']").blur(verifyUsername);
});
function verifyUsername(){
// 	$("input[name='username']").val()
// $.ajax();方法为jquery包中的方法
	$.ajax({
	//url地址，如果地址中带有中文这需要用encodeURI()方法对地址进行编码
		url:encodeURI("${pageContext.request.contextPath }/VerifyUsernameServlet"),
		//数据传递方式
		type:"post",
		//data储存传递的数据
		data:{
			username:$("input[name='username']").val()
		},
		//接收数据的格式
		dataType:"json",
		success:function(msg){
// 			$("#msg").append(msg);
			if(msg.isSuccess){
				$("#msg").html("<font color='green'>用户名可以用!</font>");
			}else{
				$("#msg").html("<font color='red'>用户名重复!</font>");
			}
			
		}
	});
}
</script>

</head>
<body>
<%
Object o=request.getAttribute("erro");
if(o!=null)
	out.print(o+"<br/>");
%>

<form action="<%=request.getContextPath() %>/register_do" method="post">
用户名：<input type="text" name="username" /><div id="msg"></div><br/>

密码：<input type="password" name="password" /><br/>
年龄：<input type="text" name="age" /><br/>
性别： 男<input type="radio" name="sex" value="T" checked="checked"/>
     女<input type="radio" name="sex" value="F" /><br/>
<input type="submit" value="注册" />
</form>
</body>
</html>