Ajax异步校验用户名是否存在

最新推荐文章于 2019-05-28 22:51:30 发布

小猴子豆芽菜

最新推荐文章于 2019-05-28 22:51:30 发布

阅读量478

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Ajax 文章标签：异步校验用户名 ajax异步校验

本文链接：https://blog.youkuaiyun.com/XU906722/article/details/79661565

Ajax 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用Ajax技术实现在用户输入用户名时实时检查用户名是否已被占用的方法。通过结合JSP页面与Java后端代码，实现了鼠标离开输入框时即时反馈用户名可用性的功能。

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

需求：

当鼠标离开输入框时，利用Ajax异步校验用户名是否存在。

解决方法：

jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head></head>
<title>异步校验用户名是否存在</title>
<script src="jquery-1.11.3.min.js" type="text/javascript"></script>
<script>
	$(function() {
		//失去焦点时触发校验
		$("#usernameId").blur(function() {
			//获取输入的用户名
			var name = $(this).val();
			//对用户名进行校验
			$.post(
				"${pageContext.request.contextPath}/checkUsername", //进行校验处理的类
				{"username":name}, //以json格式传递参数 
				function(responseData) { // 访问成功后的回调函数，responseData：响应参数
					var info = "";
					if (responseData.exist) {
						info = "该用户名可以使用";
						$("#usernameInfo").css("color","green");
					} else {
						info = "该用户名已存在";
						$("#usernameInfo").css("color","red");
					}
					$("#usernameInfo").html(info);
				},
				"json" //响应数据为json格式
			);
		});
		});
		
		function text(){
			alert("xx");
		}
</script>

</head>
<body>
	用户名：
	<input type="text" id="usernameId" placeholder="请输入用户名"><span id="usernameInfo"></span>
	<br> 密码：  
	<input type="text" id="password" placeholder="请输入密码"><span id="passwordInfo"></span>
</body>
</html>

java

package ajax;

import java.io.IOException;
import java.sql.SQLException;

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

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.ScalarHandler;

import utils.DataSourceUtils;

public class CheckUsername extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//获取用户名
		String parameter = request.getParameter("username");
		//查询用户名是否已存在
		QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
		String sql = "select count(*) from user where username=?";
		long count = 0;
		try {
			count=(long) runner.query(sql, new ScalarHandler(),parameter);
		} catch (SQLException e) {
			e.printStackTrace();
		}
		boolean exist =count>0?false:true;
		//以json字符串的形式返回查询结果
		
		response.getWriter().write("{\"exist\":"+exist+"}");
	}

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

}

动态效果