使用Ajax 判断用户名是否被占用

最新推荐文章于 2020-04-12 23:23:53 发布

Hurricane_m

最新推荐文章于 2020-04-12 23:23:53 发布

阅读量854

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： ajax验证用户名是否被注册

本文链接：https://blog.youkuaiyun.com/Hurricane_m/article/details/90580874

前端专栏收录该内容

6 篇文章

订阅专栏

博客介绍了使用原生JS和Jquery的Ajax请求来验证用户名是否被注册的方法。原生JS实现涉及view层的UserInfoAdd4JSAjax.jsp、service层的CheckUsername4Ajax Servlet和使用DBUtils的Model层；Jquery的Ajax请求代码编写量减少，前台页面为UserInfoAdd4JQAjax.jsp。

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

一、原生JS

view层：前台页面 UserInfoAdd4JSAjax.jsp

    <%@ page language="java" contentType="text/html; charset=UTF-8"
             pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户信息新增</title>
    <!-- Bootstrap core CSS -->
    <link href="${pageContext.servletContext.contextPath}/static/plugins/assets/css/bootstrap.css" rel="stylesheet">
    <!--external css-->
    <link href="${pageContext.servletContext.contextPath}/static/plugins/assets/font-awesome/css/font-awesome.css" rel="stylesheet" />

    <!-- Custom styles for this template -->
    <link href="${pageContext.servletContext.contextPath}/static/plugins/assets/css/style.css" rel="stylesheet">
    <link href="${pageContext.servletContext.contextPath}/static/plugins/assets/css/style-responsive.css" rel="stylesheet">
    <![endif]-->
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
	</script>
    <script>
    	//用户名 失去焦点  发送ajax请求
    	function checkUsername(obj) {
			//alert(obj.value);
			//创建核心对象 
			xmlhttp = null;
			if(window.XMLHttpRequest){
				xmlhttp = new XMLHttpRequest();
			}else{
				xmlhtto = new ActiveXObject("Microsoft.XMLHTTP");
			}
			//编写回调函数
			

			xmlhttp.onreadystatechange=function(){
				if(xmlhttp.readyState==4 && xmlhttp.status==200){
					//alert(xmlhttp.responseText);
					if(xmlhttp.responseText==1){
						$("#usernameMessage").html("<font color='green'>用户名可以注册</font>");
						$("#registUserinfo").attr("disabled",false);
						//document.getElementById("usernameMessage").innerHTML="<font color='green'>用户名可以注册</font>";
					}else{
						//document.getElementById("usernameMessage").innerHTML="<font color='red'>用户名已经被注册</font>";
						//document.getElementById("registUserinfo").disabled=true;
						$("#usernameMessage").html("<font color='red'>用户名已经被注册</font>");
						$("#registUserinfo").attr("disabled",true);
						//$("#registUserinfo").
						
					}
				}
			}
			//open操作
			xmlhttp.open("GET","${pageContext.request.contextPath}/CheckUsername4Ajax?username=" + obj.value);
			//send操作
			xmlhttp.send();
		}
    </script>
</head>
<body>
<section id="container" >
    <section class="wrapper">
<!-- INLINE FORM ELELEMNTS -->
        <div class="row mt" style="padding-left: 500px">
            <div class="col-lg-6">
                <div class="form-panel" >
                    <h4 class="mb"><i class="fa fa-angle-right"></i> 请输入您的注册信息</h4>
                    <form class="form-inline" role="form" action="${pageContext.servletContext.contextPath}/AddUserInfo" method="get">
                        <div class="form-group" style="margin: 2px 50px ">
                            <label class="sr-only" for="exampleInputUsername2">UserName</label>
                            <input type="text" name="user_name" class="form-control" id="exampleInputUsername2" placeholder="Enter UserName"  style="width:300px;" onblur="checkUsername(this)" >
                            <span id="usernameMessage"></font></span>
                            
                        </div>
                        <div class="form-group" style="margin: 2px 50px ">
                            <label class="sr-only" for="exampleInputPassword2">Password</label>
                            <input type="password" name="user_password" class="form-control" id="exampleInputPassword2" placeholder="Password" style="width:300px;">
                        </div>
                         <div class="form-group" style="margin: 2px 50px ">
                            <label class="sr-only" for="exampleInputCreateTime">CreateTime</label>
                            <input type="date" name="user_createtime" class="form-control" id="exampleInputCreateTime" placeholder="注册时间" style="width:300px;">
                        </div>
                        <button type="submit" class="btn btn-theme" id="registUserinfo">注册</button>
                    </form>
                </div><!-- /form-panel -->
            </div><!-- /col-lg-12 -->
        </div><!-- /row -->
    </section><! --/wrapper -->
</section><!-- /MAIN CONTENT -->

<!-- js placed at the end of the document so the pages load faster -->
<script src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/jquery.js"></script>
<script src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/bootstrap.min.js"></script>
<script class="include" type="text/javascript" src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/jquery.dcjqaccordion.2.7.js"></script>
<script src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/jquery.scrollTo.min.js"></script>
<script src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/jquery.nicescroll.js" type="text/javascript"></script>


<!--common script for all pages-->
<script src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/common-scripts.js"></script>

<!--script for this page-->
<script src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/jquery-ui-1.9.2.custom.min.js"></script>

<!--custom switch-->
<script src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/bootstrap-switch.js"></script>

<!--custom tagsinput-->
<script src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/jquery.tagsinput.js"></script>

<script type="text/javascript" src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>
<script src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/form-component.js"></script>
</body>
</html>

service层 CheckUsername4Ajax CheckUsername4Ajax Servlet

package com.mwb.control;

import java.io.IOException;
import java.util.List;

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

import com.mwb.bean.UserInfo;
import com.mwb.model.UserInfoModel;
import com.mwb.utils.EasyFactory;

/**
 * 原生的Js方式
 * 通过Ajax 检查用户名是否可以使用
 */
@WebServlet("/CheckUsername4Ajax")
public class CheckUsername4Ajax extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		String username = request.getParameter("username");
		//String un = new String(username.getBytes("iso-8859-1"),"utf-8");
		System.out.println("在CheckUsername4Ajax 中 打印 前台写入的注册用户名 " + username);
		List<UserInfo> list = EasyFactory.getNewInstance(UserInfoModel.class).queryUserInfoByParams(username);
		System.out.println("在CheckUsername4Ajax 中 打印 查询到的list集合 " + list.size());
		if(list.size()>0) {
			//说明用户名已经被占用 不能注册
			response.getWriter().println("0");
		}else {
			//用户名没有被占用可以注册
			response.getWriter().println("1");
		}
	}

}

Model层（使用DBUtils）

package com.mwb.model;

import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import javax.sql.DataSource;

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

import com.mwb.bean.PageBean;
import com.mwb.bean.UserInfo;
import com.mwb.db.DBCPDataSource;
import com.mwb.db.DBProvider;
import com.mwb.utils.EasyFactory;
import com.mwb.utils.MyUtils;

import sun.security.pkcs11.Secmod.DbMode;

public class UserInfoModel {

	
	public List<UserInfo> queryUserInfoByParams(String username){
		
		List<Object> list = new ArrayList<Object>();
		String strSql = "select * from tuserinfo where user_name = ?";
		List<UserInfo> lst = null;
		if(username!=null && !username.equals("")) {
			lst = EasyFactory.getNewInstance(DBProvider.class).query(strSql, new BeanListHandler<UserInfo>(UserInfo.class), username);
		}else {
			System.err.println("查询的用户名为null");
		}
		return lst;
	}

	

}

展示效果

当用户名已经被注册时显示提示信息并且将注册按钮不可点击

当用户名未被使用可以注册时显示信息并且注册按钮可以点击

二、使用Jquery的Ajax请求（代码编写量大大减少）

前台页面 UserInfoAdd4JQAjax.jsp

    <%@ page language="java" contentType="text/html; charset=UTF-8"
             pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户信息新增</title>
    <!-- Bootstrap core CSS -->
    <link href="${pageContext.servletContext.contextPath}/static/plugins/assets/css/bootstrap.css" rel="stylesheet">
    <!--external css-->
    <link href="${pageContext.servletContext.contextPath}/static/plugins/assets/font-awesome/css/font-awesome.css" rel="stylesheet" />

    <!-- Custom styles for this template -->
    <link href="${pageContext.servletContext.contextPath}/static/plugins/assets/css/style.css" rel="stylesheet">
    <link href="${pageContext.servletContext.contextPath}/static/plugins/assets/css/style-responsive.css" rel="stylesheet">
    <![endif]-->
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
	</script>
    <script>
    	//使用Jqery的方式  请求Ajax 判断用户名是否已经被注册
    	$(function(){
    		//给username派发一个失去焦点事件
    		$("#exampleInputUsername2").blur(function(){
    			//获取输入的值
    			var $value = $(this).val();
    			//alert($value);
    			$.get("${pageContext.request.contextPath}/CheckUsername4Ajax",{"username":$value},function(d){
    				//alert(d);
    				//设置一些操作
    				if(d==1){
						$("#usernameMessage").html("<font color='green'>用户名可以注册</font>");
						$("#registUserinfo").attr("disabled",false);
					}else{
						$("#usernameMessage").html("<font color='red'>用户名已经被注册</font>");
						$("#registUserinfo").attr("disabled",true);
					}
    				
    			},"json");
    		});
    	})
    </script>
</head>
<body>
<section id="container" >
    <section class="wrapper">
<!-- INLINE FORM ELELEMNTS -->
        <div class="row mt" style="padding-left: 500px">
            <div class="col-lg-6">
                <div class="form-panel" >
                    <h4 class="mb"><i class="fa fa-angle-right"></i> 请输入您的注册信息</h4>
                    <form class="form-inline" role="form" action="${pageContext.servletContext.contextPath}/AddUserInfo" method="get">
                        <div class="form-group" style="margin: 2px 50px ">
                            <label class="sr-only" for="exampleInputUsername2">UserName</label>
                            <input type="text" name="user_name" class="form-control" id="exampleInputUsername2" placeholder="Enter UserName"  style="width:300px;" >
                            <span id="usernameMessage"></font></span>
                            
                        </div>
                        <div class="form-group" style="margin: 2px 50px ">
                            <label class="sr-only" for="exampleInputPassword2">Password</label>
                            <input type="password" name="user_password" class="form-control" id="exampleInputPassword2" placeholder="Password" style="width:300px;">
                        </div>
                         <div class="form-group" style="margin: 2px 50px ">
                            <label class="sr-only" for="exampleInputCreateTime">CreateTime</label>
                            <input type="date" name="user_createtime" class="form-control" id="exampleInputCreateTime" placeholder="注册时间" style="width:300px;">
                        </div>
                        <button type="submit" class="btn btn-theme" id="registUserinfo">注册</button>
                    </form>
                </div><!-- /form-panel -->
            </div><!-- /col-lg-12 -->
        </div><!-- /row -->
    </section><! --/wrapper -->
</section><!-- /MAIN CONTENT -->

<!-- js placed at the end of the document so the pages load faster -->
<script src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/jquery.js"></script>
<script src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/bootstrap.min.js"></script>
<script class="include" type="text/javascript" src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/jquery.dcjqaccordion.2.7.js"></script>
<script src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/jquery.scrollTo.min.js"></script>
<script src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/jquery.nicescroll.js" type="text/javascript"></script>


<!--common script for all pages-->
<script src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/common-scripts.js"></script>

<!--script for this page-->
<script src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/jquery-ui-1.9.2.custom.min.js"></script>

<!--custom switch-->
<script src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/bootstrap-switch.js"></script>

<!--custom tagsinput-->
<script src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/jquery.tagsinput.js"></script>

<script type="text/javascript" src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>
<script src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/form-component.js"></script>
</body>
</html>