【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 ...
随机推荐
- 【邀请函】小投入 大产出—微软智能云(Azure)之CDN 专题
会议时间 2016 年 11 月 24 日 14:00-16:00 会议介绍 尊敬的客户: 您是否还在为如何提高网站的响应速度以及用户增长造成的源站压力烦恼?是否还在担心源站 IP 暴露存在安全隐患? ...
- 【Leetcode】【Easy】Merge Sorted Array
Given two sorted integer arrays A and B, merge B into A as one sorted array. Note:You may assume tha ...
- rel 属性<small>H5保留属性</small>
源文件
- myeclipse 阿里巴巴java开发规范
今天发现阿里巴巴搞了个java开发规范,然后火了: 然后发现我也整了一下: 阿里巴巴java开发规范宣传页: http://mp.weixin.qq.com/s/IbibsXlWHlM59kfXJqR ...
- 【转载】#457 Converting Between enums and their Underlying Type
When you declare an enum, by default each enumerated value is represented internally with an int. (S ...
- linux下vi的一些简单的操作
前言 在嵌入式linux开发中,进行需要修改一下配置文件之类的,必须使用vi,因此,熟悉 vi 的一些基本操作,有助于提高工作效率. 一,模式 vi编辑器有3种模式:命令模式.输入模式.末行模式.掌握 ...
- Django:web框架本质
一,web框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web框架了. 1,自定义web框架 impo ...
- luogu P1121 环状最大两段子段和
嘟嘟嘟 一道说难也难说简单也简单的dp题. 我觉得我的(有篇题解)做法就属于特别简单的. 平时遇到环的问题都是断环为链,但这道题给了一种新的思路. 观察一下,最后的答案无非就这两种:xxx--xx-- ...
- 【luogu P3950 部落冲突】 题解
题目连接:https://www.luogu.org/problemnew/show/P3950 1.像我这种学数据结构学傻了的 2.边权化点权 所有点权初始化0 3.对于战争 将深度较深的-1,对于 ...
- 【luogu P1816 忠诚】 题解
题目链接:https://www.luogu.org/problemnew/show/P1816 用st表来解决rmq问题. 表示同时培训学的st表,然后我就忘得差不多了,在这里推荐一篇blog 大佬 ...