使用ajax检查注册时用户名是否重复

1、首先在注册页面添加两个span标签,用于放用户名不重复时的 “用户名可用” 提示,和用户名重复时的 “用户名不可用” 提示,默认先隐藏(style=“display: none”)
<span id="span1" class="label label-success" style="display: none">用户名可用</span>
<span id="span2" class="label label-danger" style="display: none">用户名不可用</span>
2、编写ajax代码
1、获取注册时表单中填写的用户名
2、如果没有填写任何数据,此时为"",直接就return掉,结束请求;反之请求Servlet
3.编写ajax代码
<script>
$(function () {
	$("#username").blur(function () { //用户名框失去焦点时,发生下列事件
	
		//获取注册时表单中填写的用户名
		var username = $("#username").val();

		//如果username为“”,什么都不显示
		if (username.trim() == "") {
			$("#span1").hide();
			$("#span2").hide();
			return;
		}

		//根据传回来的数据判断是否显示
		$.post("${pageContext.request.contextPath}/UserRegisterServlet", {username:username}, function (data) {
			if (data == 1){ //如果返回1,说明用户名没有重复,提示“用户名可用”,“用户名不可用” 要隐藏;反之相反
				$("#span1").show();
				$("#span2").hide();
			}else{
				$("#span2").show();
				$("#span1").hide();
			}
		});
	})
})
</script>
3、Servlet响应代码
//设置请求时中文乱码
request.setCharacterEncoding("utf-8");
//接收参数
String username = request.getParameter("username");
//依赖service层
UserService us = new UserService();
int i = 0;
try {
    i = us.checkUserName(username);
} catch (SQLException e) {
    e.printStackTrace();
}

//做出ajax响应
response.getWriter().print(i);
  • 1
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过 AJAX 技术来实现在注册检查用户名是否重复。首先,在前端页面上,当用户输入用户名后,触发一个 AJAX 请求,将用户名发送到后端进行检查。后端可以通过查询数据库来判断用户名是否已经存在,然后将判断结果返回给前端。如果用户名已经存在,则前端可以提示用户重新输入用户名;如果用户名不存在,则可以让用户继续填写其他信息。具体实现可以参考以下步骤: 1. 在前端页面上,添加一个文本框用于用户输入用户名,同添加一个按钮用于触发 AJAX 请求。 2. 给按钮添加一个点击事件,当用户点击按钮,触发 AJAX 请求。 3. 在 AJAX 请求中,将用户名发送到后端进行检查。 4. 后端接收到请求后,查询数据库,判断用户名是否存在。 5. 将判断结果返回给前端,前端根据结果提示用户或继续填写其他信息。 以下是一个简单的示例代码: 前端页面: ```html <input type="text" id="username"> <button onclick="checkUsername()">检查用户名</button> <div id="result"></div> <script> function checkUsername() { var username = document.getElementById("username").value; var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var result = xhr.responseText; document.getElementById("result").innerHTML = result; } } xhr.open("GET", "/check_username?username=" + username, true); xhr.send(); } </script> ``` 后端代码: ```python from flask import Flask, request app = Flask(__name__) @app.route('/check_username') def check_username(): username = request.args.get('username') # 查询数据库,判断用户名是否存在 if username_exists(username): return "用户名已存在" else: return "用户名可用" ``` 其中,`username_exists` 函数用于查询数据库判断用户名是否存在。可以根据具体情况自行实现。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值