【ajax】ajax异步实现用户注册验证

最新推荐文章于 2022-12-15 22:37:53 发布
最新推荐文章于 2022-12-15 22:37:53 发布
阅读量351 收藏 2
点赞数 1
文章标签： 数据库 javascript java ViewUI
原文链接：http://www.cnblogs.com/chromer/p/ajax.html
版权

从前台到后台实现简单用户注册检查用户是否存在

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>

转载于:https://www.cnblogs.com/chromer/p/ajax.html

dingchanjuan4613
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用ajax异步校验验证码
龙腾四海365的专栏
11-28 4458
利用ajax异步校验验证码 示例结果如图所示 具体步骤如下： step1: jsp页面及js脚本 form /js/my.js"> //检查用户名是否存在 function check_username(){ //step1,获得ajax对象 var xhr = getXhr(); var username
Ajax异步验证
zhangze_wancheng的专栏
09-09 7881
场景描述： 登录程序大家都不陌生，但如果要注册，则必须保证用户的ID不能重复，这种检测用户ID的操作可以通过Ajax完成。   表结构：   异步验证 var xmlHttp; var flag; function createXMLHttp(){ if (window.XMLHttpRequest){ // 创建XMLHttpRequest核心对象
ajax 异步验证
weixin_30784945的博客
11-11 69
function checkusername(){ var username=document.getElementById("").value; //1.创建XMLHttp协议对象 var xmlHttp; if(window.ActiveXObject){ xmlHttp=newActiveXObject("Microsoft.XMLHTTP"); }else if(windo...
ajax实现用户登录注册
07-28
ajax实现用户登录注册，完整的验证，经过调试，适合初学者
使用AJAX 异步验证注册功能
xiao-fei的博客
10-22 738
使用AJAX 异步验证注册功能： 一、需求： 验证用户名是否重复； 用户名是否5-20字符； 密码至少8-20； 邮箱格式要正确 且不能为空； 如果验证没通过，则不发送注册请求 注册成功后显示注册成功，然后跳转到登录页面。 1、前端校验：js文件 var error_name =...
ajax异步验证
qq_43392001的博客
05-28 595
ajax ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。 Ajax = 异步 JavaScript 和 XML 或者是 HTML（标准通用标记语言的子集）。 Ajax 是一种用于创建快速动态网页的技术。 Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 通过...
AJAX：异步验证
抛弃幻想，准备斗争
10-21 295
对于此时的异步验证，主要验证两个部分：用户名是否可以使用，另外一个部分验证码是否正确； <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getSche...
Ajax实现异步交互完成注册页面
mahaopengphp的专栏
12-19 756
今天李伟老师带我们从新复习了Ajax   Ajax服务器是实现异步交互来完成显示的。 假如传统是一个页面，你要刷新页面需要向服务器发送请求，然后服务器把刷新后的返还给你，这样重会有一段时间的白页，并且慢，而且刷新了全部的页面。 而Ajax的异步交互 就是仅仅自动刷新你要看到的 不用一下刷新一整个页面 和样子不仅方便快捷，而且更加的人性化 。   基于Ajax 他比传统的方式更加的便捷
ajax异步注册代码,ajax——异步操作、整合注册功能
weixin_33169898的博客
08-05 176
1. 整合整套注册流程1.1. 处理持久层复制此前项目的db.properties和spring-dao.xml到当前项目中，修改必要的配置，例如持久层接口所在的包。在创建srcmainresources下创建mappers文档夹，复制并得到新的UserMapper.xml文档。检查User实体类是否与数据表保持一致：public class User implements Serializabl...
Ajax实现登录验证
06-24
Ajax实现的登录页面，能够不刷新页面直接登录
用AJAX实现页面登陆以及注册用户名验证的简单实例
01-19
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。 AJAX 是一种用于创建快速动态网页的技术。其核心是 JavaScript 对象 XMLHttpRequest。该对象在 Internet Explorer 5 中首次引入，它是一种支持异步请求的技术。简而言之，XMLHttpRequest使您可以使用 JavaScript 向服务器提出请求并处理响应，而不阻塞用户。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某
ajax异步请求校验用户名实现注册功能
最新发布
m0_63378258的博客
12-15 628
本次案例主要实现的功能：注册时判断用户名是否可用、密码非空校验、两次密码不一致校验
Ajax如何实现注册登陆验证
轻云流火 chitry
07-07 1167
jsp页面部分：通过JS进行客户端的表单验证，主要验证表单的格式、输入是否正确，使用这种方式可以避免在提交之后才返回一个简单的输入错误，在网速较慢的情况下更能提高效率。 page language="java" import="java.util.*" pageEncoding="UTF-8"%>@page language="java" contentType="text/html;
Ajax实现简单的登录验证与帐号注册
热门推荐
恰西v的前端开发学习笔记
01-05 2万+
上一篇博客介绍了Ajax的GET和POST方法以及上传文件的进度条展示,这篇博客将介绍一个简单的登录与注册功能的实现
通过Ajax实现注册登陆的表单验证，一看就会。
qq_60614034的博客
12-05 2988
ajax的简单应用，简单好懂。本次运用的软件为ideal，使用的是tomcat服务器，无框架编程。Asynchronous JavaScript And XML是一种通过JavaScript和后台进行通信的技术，能够实现页面的局部刷新，提高用户的体验常规页面刷新会更新整个页面。ajax技术通过浏览器局部发送请求给后台，后台通过resp.getWriter.print("");响应给前台页面 服务器具体实现代码： 浏览器代码： 注册代码： 登陆代码： 至于为什么要用jq
使用Ajax实现登录验证
不因俊俏难为友，正为风流始读书
12-22 5787
get提交方式： <%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=utf-8"%> My JSP 'loginAjax.jsp' starting page body { text-align: center
Ajax异步验证-----jQuery
qq_40764966的博客
12-31 328
    Ajax开发技术可以实现页面的局部更新，而不影响整体。     由于异步验证执行JavaScript操作过于繁琐了解即可。这里用jQuery实现Ajax的异步验证。 需求：当用户输入ID之后，会使用Ajax将信息提交到服务器上进行验证，如果此ID没有被人使用,则提示正确；如果有人使用，则提示错误信息。 数据库u...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值