使用JQuery实现校验用户名

最新推荐文章于 2021-10-20 22:11:23 发布

Woo_home

最新推荐文章于 2021-10-20 22:11:23 发布

阅读量1.9k

点赞数 2

分类专栏： # Ajax and JQuery

本文链接：https://blog.csdn.net/Woo_home/article/details/89061398

版权

Ajax and JQuery 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

使用JQuery实现校验用户名

上一篇使用Ajax来校验用户名，不知道的可以看下这篇Ajax校验用户名，实现的效果是一样的，但是相对于Jquery来说代码比较多一点，现在用jQuery也来实现一下

新建一个数据库，字段与html的列名对应就行
使用jQuery之前需要导入一个js代码，也就是一个包吧——jquery-1.11.3.min.js，这是1版本的，感兴趣的朋友们可以去下载最新的，现在最新的好像是3版本

html：

<body>
   	<table border="1" width="500">
   		<tr>
   			<td>用户名:</td>
   			<td><input type="text" name="name" id="name"  onblur="checkUserName()"><span id="span01"></span></td> 
   		</tr>
   		<tr>
   			<td>密码</td>
   			<td><input type="text" name=""></td>
   		</tr>
   		<tr>
   			<td>邮箱</td>
   			<td><input type="text" name=""></td>
   		</tr>
   		<tr>
   			<td>简介</td>
   			<td><input type="text" name=""></td>
   		</tr>
   		<tr>
   			<td colspan="2"><input type="submit" value="注册"></td>
   		</tr>
   	</table>
   </body>

jsp里面使用jQuery

function checkUserName() {
			//1. 获取输入框的内容
			var name = $("#name").val();
			
			//2. 发送请求
			$.post("/day16/CheckUserNameServlet" , {name:name} , function(data , status){
				//alert(data);
				if(data == 1){//用户名存在
					//alert("用户名存在");
					$("#span01").html("<font color='red'>用户名已被注册</font>");
				}else{
					//alert("用户名可用");
					$("#span01").html("<font color='green'>用户名可以使用</font>");
				}
			} );
			//3. 输出响应的数据到页面上。
		}

servlet：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		try {
			
			request.setCharacterEncoding("UTF-8");
			
			//1. 检测是否存在
			String name = request.getParameter("name");
			System.out.println("name="+name);
			
			UserDao dao = new UserDaomImpl();
			boolean isExist = dao.checkUserName(name);
			
			//2.  通知页面，到底有还是没有。
			if(isExist){
				response.getWriter().println(1);  //存在用户名
			}else{
				response.getWriter().println(2); //不存在该用户名
			}
			
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}

DaoImpl：用于实现Dao里面的方法

public class UserDaomImpl implements UserDao{

			@Override
			public boolean checkUserName(String username) throws SQLException {
				QueryRunner runner = new QueryRunner(JDBCUtil02.getDataSource());
				
				String sql = "select count(*) from t_user where username =?";


				runner.query(sql, new  ScalarHandler(), username);

				Long result = (Long) runner.query(sql, new  ScalarHandler(), username); 
				return result > 0 ;
			}
		
		}

Dao：用于判断用户

import java.sql.SQLException;

public interface UserDao {

	
	/**
	 * 用于检测用户名是否存在
	 * @param username
	 * @return true : 存在 ，false : 不存在
	 */
	boolean checkUserName(String username) throws SQLException;
}

效果图：
在这里插入图片描述

正在尝试写博客，把会的分享给你们，如有写的不好的地方，希望指点一下，谢谢！

Woo_home

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
使用JQuery实现校验用户名

使用JQuery实现校验用户名上一篇使用Ajax来校验用户名，不知道的可以看下这篇Ajax校验用户名，实现的效果是一样的，但是相对于Jquery来说代码比较多一点，现在用jQuery也来实现一下新建一个数据库，字段与html的列名对应就行html：<body> <table border="1" width="500"> <tr&gt...
复制链接

扫一扫

专栏目录