【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 ...
随机推荐
- solidity语言2
变量类型(Value Types) # 布尔型 关键字 bool 值 true , false 操作符 !, &&, ||, ==, != # 整型 关键字 int(int256), ...
- vscode 显示"没有活动的源代码控制提供程序“处理
不知为何我的 VS Code 在 1.25 版本开始就一直 ”没有活动的源代码控制提供程序“,找了好几天都没找到,今天终于找到怎么处理了, 切换到插件中找到下图对应的 Git (可以直接再上面搜索框输 ...
- 【Leetcode】【Easy】ZigZag Conversion
The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows like ...
- python编写的简单的mysql巡检脚本
准备工作:1 安装python 3.5,本次使用源码安装.2 安装psutil模块,使用python3.5自带的easy_install包直接运行cd /opt/python3/bin./ ...
- June 16th 2017 Week 24th Friday
Progress is the activity of today and the assurance of tomorrow. 进步是今天的活动,明天的保证. The best preparatio ...
- 如何在Kubernetes里给PostgreSQL创建secret
创建一个initdb.sql文件,输入如下内容: -- This is a postgres initialization script for the postgres container. -- ...
- c++利用互斥锁实现读写锁
很简单就是在读的时候把写的锁锁住就好了 class readwrite_lock { public: readwrite_lock() : read_cnt(0) { } void readLock( ...
- spring boot应用启动原理分析
spring boot quick start 在spring boot里,很吸引人的一个特性是可以直接把应用打包成为一个jar/war,然后这个jar/war是可以直接启动的,不需要另外配置一个We ...
- 解决Storm 和yarn 8080 端口冲突
本机装了Yarn和Storm后,启动Storm后,发现NodeMange无法启动,找了下没找着在哪修改.只好修改Storm的配置,在配置上添加 ui.port: "9999" 再启 ...
- centos安装nodejs二进制包
1.下载nodejs的二进制包 wget https://nodejs.org/dist/v6.3.1/node-v6.3.1-linux-x64.tar.xz 2.解压下载的安装包 tar xf n ...