使用ajax实现用户名存在校验,使用AJAX完成用户名是否存在异步校验

使用AJAX完成用户名是否存在异步校验:

1.事件触发:

* onblur

2.编写AJAX代码:

* 项Action中提交:传递username参数

3.编写Action

* 接收username:模型驱动接收.

4.* 编写实体类

* User

* User.hbm.xml

* 配置到spring中.

5.编写DAO

* 继承HibernateDaoSupport

* 在配置中注入sessionFactory

6.编写Service:

* 注入UserDao

* 事务管理:

核心代码实现:

function checkUsername(){

// 获得文件框值:

var username = document.getElementById("username").value;

// 1.创建异步交互对象

var xhr = createXmlHttp();

// 2.设置监听

xhr.onreadystatechange = function(){

if(xhr.readyState == 4){

if(xhr.status == 200){

document.getElementById("span1").innerHTML = xhr.responseText;

}

}

}

// 3.打开连接

xhr.open("GET","${pageContext.request.contextPath}/user_findByName.action?time="+new Date().getTime()+"&username="+username,true);

// 4.发送

xhr.send(null);

}

function createXmlHttp(){

var xmlHttp;

try{ // Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

}

catch (e){

try{// Internet Explorer

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}

catch (e){

try{

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}

catch (e){}

}

}

return xmlHttp;

}

public String findByName() throws IOException {

// 调用Service进行查询:

User existUser = userService.findByUsername(user.getUsername());

// 获得response对象,项页面输出:

HttpServletResponse response = ServletActionContext.getResponse();

response.setContentType("text/html;charset=UTF-8");

// 判断

if (existUser != null) {

// 查询到该用户:用户名已经存在

response.getWriter().println("用户名已经存在");

} else {

// 没查询到该用户:用户名可以使用

response.getWriter().println("用户名可以使用");

}

return NONE;

}

private UserDao userDao;

public void setUserDao(UserDao userDao) {

this.userDao = userDao;

}

// 按用户名查询用户的方法:

public User findByUsername(String username){

return userDao.findByUsername(username);

}

public User findByUsername(String username){

String hql = "from User where username = ?";

List list = this.getHibernateTemplate().find(hql, username);

if(list != null && list.size() > 0){

return list.get(0);

}

return null;

}

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xmlns:context="http://www.springframework.org/schema/context"

xmlns:aop="http://www.springframework.org/schema/aop"

xmlns:tx="http://www.springframework.org/schema/tx"

xsi:schemaLocation="http://www.springframework.org/schema/beans

http://www.springframework.org/schema/beans/spring-beans.xsd

http://www.springframework.org/schema/context

http://www.springframework.org/schema/context/spring-context.xsd

http://www.springframework.org/schema/aop

http://www.springframework.org/schema/aop/spring-aop.xsd

http://www.springframework.org/schema/tx

http://www.springframework.org/schema/tx/spring-tx.xsd">

org.hibernate.dialect.MySQLDialect

true

true

false

update

cn/itcast/shop/user/vo/User.hbm.xml

[html] view plain copy 在CODE上查看代码片派生到我的代码片

/p>

"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"

"http://struts.apache.org/dtds/struts-2.3.dtd">

/WEB-INF/jsp/msg.jsp

/WEB-INF/jsp/index.jsp

/WEB-INF/jsp/regist.jsp

/WEB-INF/jsp/regist.jsp

/WEB-INF/jsp/login.jsp

/WEB-INF/jsp/login.jsp

index

index

/WEB-INF/jsp/regist.jsp

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个基于AJAX实现的用户注册信息异步校验的示例代码: HTML代码: ``` <form id="register-form"> <label for="username">用户名:</label> <input type="text" id="username" name="username"> <span id="username-tips"></span><br> <label for="email">电子邮箱:</label> <input type="email" id="email" name="email"> <span id="email-tips"></span><br> <label for="password">密码:</label> <input type="password" id="password" name="password"><br> <label for="confirm-password">确认密码:</label> <input type="password" id="confirm-password" name="confirm-password"> <span id="password-tips"></span><br> <button type="submit">注册</button> </form> ``` JavaScript代码: ``` $(document).ready(function() { // 防止表单默认提交 $('#register-form').submit(function(event) { event.preventDefault(); }); // 用户名异步校验 $('#username').blur(function() { var username = $('#username').val(); $.ajax({ url: '/check-username', type: 'POST', data: {username: username}, success: function(data) { if (data.status === 'success') { $('#username-tips').text(''); } else { $('#username-tips').text(data.message); } } }); }); // 电子邮箱异步校验 $('#email').blur(function() { var email = $('#email').val(); $.ajax({ url: '/check-email', type: 'POST', data: {email: email}, success: function(data) { if (data.status === 'success') { $('#email-tips').text(''); } else { $('#email-tips').text(data.message); } } }); }); // 密码异步校验 $('#password').blur(function() { var password = $('#password').val(); var confirmPassword = $('#confirm-password').val(); if (password !== confirmPassword) { $('#password-tips').text('两次密码不一致'); return; } $('#password-tips').text(''); }); // 提交表单 $('button[type="submit"]').click(function() { var username = $('#username').val(); var email = $('#email').val(); var password = $('#password').val(); var confirmPassword = $('#confirm-password').val(); if (!username || !email || !password || password !== confirmPassword) { alert('请正确填写表单'); return; } $.ajax({ url: '/register', type: 'POST', data: $('#register-form').serialize(), success: function(data) { if (data.status === 'success') { alert('注册成功'); } else { alert(data.message); } } }); }); }); ``` 以上代码中,通过使用jQuery的$.ajax方法,实现了异步校验用户名、电子邮箱、密码等信息,并在前端页面上实时反馈校验结果。在提交表单时,再次校验表单数据的合法性,如果表单数据无误,则使用AJAX提交表单数据给后端服务器进行注册处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值