【ajax】ajax异步实现用户注册验证
从前台到后台实现简单用户注册检查用户是否存在
1.编写domain
public class User {
private String username;
private String password;
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
2.编写dao
public class UserDao {
/**
* 通过用户名获取用户
* @param username
* @return
* @throws SQLException
*/
public User getUserByUsername4Ajax(String username) throws SQLException {
QueryRunner qr = new QueryRunner(DataSourceUtils.getDataSource());
String sql = "select * from user where username = ? limit 1";
User user = qr.query(sql, new BeanHandler<>(User.class), username);
return user;
}
}
3.编写service
public class UserService {
/**
* 检测用户名是否被占用
* @param username
* @return
* @throws SQLException
*/
public User checkUsername4Ajax(String username) throws SQLException{
UserDao userDao = new UserDao();
return userDao.getUserByUsername4Ajax(username);
}
}
4.编写controller
public class CheckUsername4AjaxServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 0.设置编码
// 1.接收用户名
String username = request.getParameter("username");
username = new String(username.getBytes("iso-8859-1"),"utf-8");
System.out.println(username);
// 2.调用service 完成查询 返回值user
UserService userService = new UserService();
User user = null;
try {
user = userService.checkUsername4Ajax(username);
} catch (SQLException e) {
e.printStackTrace();
}
// 3.写回信息
if (user == null) {
response.getWriter().println("1");
} else {
response.getWriter().println("0");
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
5.编写注册页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>用户注册</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function() {
// 给username派发一个失去焦点事件发送ajax请求
$("input[name='username']").blur(function() {
// 获取输入的文本内容
var $value = $(this).val();
var url = "${pageContext.request.contextPath}/checkUsername4Ajax";
var params = "username="+$value;
$.get(url, params, function(d) {
if (d == 1) {
$("#username_msg").html("<font color='green'>用户名可以使用</font>");
} else {
$("#username_msg").html("<font color='red'>用户名已被占用</font>");
}
});
});
});
</script>
</head>
<body>
<form action="" method="post" >
<table border="0" align="center" cellpadding="0">
<tr >
<td colspan="2" align="center"><h2>用户注册</h2></td>
</tr>
<tr>
<td>用户名：</td>
<td><input type="text" name="username"/></td>
<td><span id="username_msg"></span></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="password"/></td>
<td></td>
</tr>
<tr>
<td colspan="3" align="center"><input type="submit" name="submit" id="submit" value="提交"/><input type="reset" name="reset" value="重置"/></td>
</tr>
</table>
</form>
</body>
</html>
附录
1.DataSourceUtils工具类
public class DataSourceUtils {
private static ComboPooledDataSource ds = new ComboPooledDataSource();
private static ThreadLocal<Connection> tl = new ThreadLocal<>();
/**
* 获取数据源
* @return 连接池
*/
public static DataSource getDataSource() {
return ds;
}
/**
* 从当前线程上获取连接
* @return 连接
* @throws SQLException
*/
public static Connection getConnection() throws SQLException {
Connection conn = tl.get();
if (conn == null) {
// 第一次获取，创建一个连接和当前的线程绑定
conn = ds.getConnection();
// 绑定
tl.set(conn);
}
return conn;
}
/**
* 释放资源
* @param conn 连接
* @param st 语句执行者
* @param rs 结果集
*/
public static void closeResource(Connection conn, Statement st, ResultSet rs) {
closeResource(st, rs);
closeConn(conn);
}
/**
* 释放连接
* @param conn 连接
*/
private static void closeConn(Connection conn) {
if (conn != null) {
try {
conn.close();
// 和当前的线程解绑
tl.remove();
} catch (SQLException e) {
e.printStackTrace();
}
conn = null;
}
}
private static void closeResource(Statement st, ResultSet rs) {
closeResultSet(rs);
closeStatement(st);
}
private static void closeStatement(Statement st) {
if (st != null) {
try {
st.close();
} catch (SQLException e) {
e.printStackTrace();
}
st = null;
}
}
private static void closeResultSet(ResultSet rs) {
if (rs != null) {
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
rs = null;
}
}
/**
* 开启事务
* @throws SQLException
*/
public static void startTransaction() throws SQLException{
// 获取连接
// 开始事务
getConnection().setAutoCommit(false);
}
/**
* 事务提交
*/
public static void commitAndClose() {
try {
// 获取连接
Connection conn = getConnection();
// 提交事务
conn.commit();
// 释放资源
conn.close();
// 解除绑定
tl.remove();
} catch (SQLException e) {
e.printStackTrace();
}
}
public static void rollbackAndClose() {
try {
// 获取连接
Connection conn = getConnection();
// 事务回滚
conn.rollback();
// 释放资源
conn.close();
// 解除绑定
tl.remove();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
2.c3p0-config配置文件
<c3p0-config>
<!-- 默认配置，如果没有指定则使用这个配置 -->
<default-config>
<!-- 基本配置 -->
<property name="driverClass">com.mysql.jdbc.Driver</property>
<property name="jdbcUrl">jdbc:mysql://localhost:3306/ajax</property>
<property name="user">root</property>
<property name="password">123456</property>
<!--扩展配置-->
<property name="checkoutTimeout">30000</property>
<property name="idleConnectionTestPeriod">30</property>
<property name="initialPoolSize">10</property>
<property name="maxIdleTime">30</property>
<property name="maxPoolSize">100</property>
<property name="minPoolSize">10</property>
<property name="maxStatements">200</property>
</default-config>
</c3p0-config>
【ajax】ajax异步实现用户注册验证的更多相关文章
- ajax jquery 异步表单验证
文件目录: html代码: <html> <head> <title>异步表单验证</title> <script type='text/java ...
- PHP+Ajax 异步通讯注册验证
HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- struts2+ajax实现异步验证实现
由于老师布置作业的需要,在添加管理员的时候,要实现验证添加的管理员的用户名是否在数据库中已经存在,然后再客户端给用户一个提示.我首先想到的就是利用ajax实现异步验证技术,由于利用的ssh框架,所以在 ...
- struts2+ajax实现异步验证
由于老师布置作业的需要,在添加管理员的时候,要实现验证添加的管理员的用户名是否在数据库中已经存在,然后再客户端给用户一个提示.我首先想到的就是利用ajax实现异步验证技术,由于利用的ssh框架,所以在 ...
- 表单验证--通过原生js模仿ajax的异步交互
今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...
- thinkphp+jquery+ajax前后端交互注册验证
thinkphp+jquery+ajax前后端交互注册验证,界面如下 register.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- jQuery结合Ajax实现简单的前端验证和服务端查询
上篇文章写了简单的前端验证由传统的JavaScript转向流畅的jQuery滑动验证,现在拓展一下,使用Ajax实现用户体验比较好的异步查询,同样还是从建立一个简单的表单开始 <form nam ...
- 掌握 Ajax，第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
转http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 ...
- ajax初探--实现简单实时验证
学习技术最好的方式就是在做中学,做一个小demo来对前端输入进行实时验证. 利用ajax技术和Sevlet技术来实现,使用原生的js. 源码可访问,我的Github 什么是ajax Ajax 即&qu ...
随机推荐
- 使用 SQL SERVER PROFILER 监测死锁
作为DBA,可能经常会遇到有同事或者客户反映经常发生死锁,影响了系统的使用.此时,你需要尽快侦测和处理这类问题. 死锁是当两个或者以上的事务互相阻塞引起的.在这种情况下两个事务会无限期地等待对方释放资 ...
- Shell脚本批量修改图片尺寸
#!/bin/sh function scandir(){ local cur_dir parent_dir workdir workdir=$ cd ${workdir} if [ ${workdi ...
- 路由 vue-router
vue-router官方文档 1.router跳转页面 编程式的导航 this.$router.push('/index'); 2.mode Router构造配置 const router = new ...
- ORA-01795: 列表中的最大表达式数为1000的解决方法
IN中的数据量不能超过1000条. 解决方案:把条件分成多个少于1000的IN即: DELETEFROMT_MM_SECTION_SITE_UPDATEWHERE T.T_MM_SECTION_SL_ ...
- python创建项目
一.准备下载 python3.6.6 https://www.python.org/downloads/windows/(需要注意你的电脑是32位还是64位) mysql 5.1.72 https:/ ...
- 服务器安装anaconda
SSH连接服务器可以用putty 网址:https://repo.continuum.io/archive/ 下载安装脚本 wget https://repo.anaconda.com/archive ...
- Fiddler拦截并动态修改网页内容简易教程
Fiddler默认可以拦截全局http请求,再加上它具备的脚本功能,可以很简单的达到动态修改网页内容的目的. 1.启动Fiddler 2.打开Rules->Customize Rules..., ...
- 【luogu P2762 太空飞行计划问题】 题解
题目链接:https://www.luogu.org/problemnew/show/P2762 算是拍照那个题的加强下. 输入真的很毒瘤.(都这么说但好像我的过了?) #include <qu ...
- Mybatis自动生成的BO对象继承公共父类(BO中过滤掉公共属性)
使用mybatis的代码生成工具:mybatis-generator,如果自动生成的BO都有公共的属性,则可以指定这些BO继承父类(父类中定义公共属性) 1.定义父类 注意:属性public,不要使用 ...
- 下载YouTube视频的网站和工具
1.界面友好,可选择的清晰度较多(我个人用这个比较多) http://en.savefrom.net/ 2.几乎可以解析到所有的清晰度 http://www.clipconverter.cc 3.可选 ...