ajax 验证用户名是否已存在

ajax验证用户名是否已存在

ajax验证用户名是否已存在 ,一般选用的是同步请求,因为验证用户是否存在的同时,
一般还要验证用户名是否为空等表单验证。

jsp页面以及ajax验证如下:

<%@ 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 'index.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">
	<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
	<script type="text/javascript">
	
		$(function(){
			$("#uname").blur(function(){
				var uname = $(this).val();
				
				if(uname==""){
					$("#remind").html("用户名不能为空");
				}else{
					// $.ajax方法实现
					$.ajax({
						url:"IsUserServlet",
						type:"get",
						data:"uname="+uname,
						dataType:"text",
						async:false,
						success:function(result){
							$("#remind").html(result);
						}
					});
					
					// $.get()方法实现,$.post方法也是一样的,post方法不能在地址后面直接传值
					//$.get("IsUserServlet","uname=" + uname, function(result){
					//	$("#remind").html(result);
					//},"text");
					
					// load()方式实现
					//$("#remind").load("IsUserServlet","uname=" + uname);
				}
			});
			
			
			
		});
		
	</script>
	
  </head>
  
  <body>
    	用户名:<input type="text" name="uanme" id="uname" /><span id="remind"></span>
    	
  </body>
</html>

控制层的servlet代码如下:

public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		User user = new User();
		// 接收前端输入的用户名
		String uname = request.getParameter("uname");
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		
		UserService userService = new UserServiceImpl();
		
		if(userService.login(uname)){
			response.getWriter().write("用户名已存在");
		}else{
			response.getWriter().write("用户名不存在");
		}
	}

ajax验证用户名结果示例:

这里写图片描述

感谢您的阅读,欢迎参观我的个人网站:知行乐集【www.zhixinglj.cn】

  • 10
    点赞
  • 64
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
好的,您可以通过以下步骤实现: 1. 在前端页面中,添加一个文本框用于输入用户名,并添加一个按钮用于触发验证用户是否存在的操作。 2. 在按钮的点击事件中,使用Ajax向后端发送请求,以验证用户名是否存在。 3. 后端接收到请求后,查询数据库中是否存在用户名,如果存在,则返回一个存在的标识;否则返回一个不存在的标识。 4. 前端通过接收到的标识来判断用户名是否存在,并进行相应的操作,如提示用户或者允许用户进行下一步操作。 下面是一个使用jQuery实现的示例代码: ```javascript // 前端代码 $('#check_username_btn').click(function() { var username = $('#username_input').val(); $.ajax({ url: '/check_username', type: 'POST', data: {username: username}, success: function(data) { if (data.exist) { alert('该用户名已被占用!'); } else { alert('该用户名可以使用!'); } }, error: function() { alert('请求失败!'); } }); }); // 后端代码 from flask import Flask, request, jsonify app = Flask(__name__) @app.route('/check_username', methods=['POST']) def check_username(): username = request.form.get('username') # 查询数据库中是否存在用户名 exist = db.query('SELECT * FROM users WHERE username=%s', [username]) return jsonify({'exist': exist}) if __name__ == '__main__': app.run() ``` 在上述代码中,我们使用了jQuery的ajax方法向后端发送POST请求请求的数据包括用户名。后端接收到请求后,查询数据库中是否存在用户名,如果存在,则返回一个存在的标识;否则返回一个不存在的标识。前端通过接收到的标识来判断用户名是否存在,并进行相应的操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值