使用struts2+Ajax+jquery验证用户名是否已被注册


Posted in Javascript onMarch 22, 2016

推荐阅读:JQuery+Ajax+Struts2+Hibernate框架整合实现完整的登录注册

在用户模块中的用户注册需求上,通常要进行用户名是否已被注册的验证,今天正好写了这个需求,把详细代码和所遇到的问题贴过来.在使用struts2+ajax时候,通常我们会返回json类型的数据,但是像上面的例子,我们只希望返回一个1和0有助于进行后续判断即可,没必要返回json类型,返回一个text字符串就可以了.

regist.jsp(这里只提供<script>部分):

<script type="text/javascript">
$(function() {
$("#userNiName").blur(function() {
var val = $(this).val();
val = $.trim(val);
var $this = $(this);
if (val != "") {
//把当前节点后面的所有 font 兄弟节点删除
$this.nextAll("font").remove();
var url = "user_checkName";
var args = {
"userNiName" : val,
"time" : new Date()
};
$.post(url, args, function(data) {
//表示可用
if (data == "1") {
$this.after("<font color='green'>用户名可用!</font>");
}
//不可用
else if (data == "0") {
$this.after("<font color='red'>用户名已被注册!</font>");
}
//服务器错误
else {
alert("服务器错误!");
}
});
} else {
$(this).val("");
$this.focus();
}
});
})
</script>

这里我是用了Jquery.post(url,args,function(data){..})函数提交ajax请求到指定url,并且携带参数args,最后用一个回调函数处理请求返回结果data.

UserAction:

public class UserAction extends ActionSupport implements ModelDriven<User>{
private User user=new User();
private UserService userService;
private InputStream inputStream;
public InputStream getInputStream() {
return inputStream;
}
//检验用户昵称是否存在
public String checkName() throws UnsupportedEncodingException{
System.out.println("进入ajax检验");
String userNiName=user.getUserNiName();
if(userService.findUserByName(userNiName)==null){
inputStream=new ByteArrayInputStream("1".getBytes("UTF-8"));
}else{
inputStream=new ByteArrayInputStream("0".getBytes("UTF-8"));
}
return "ajax_succ";
}
@Override
public User getModel() {
return user;
}
public void setUserService(UserService userService) {
this.userService = userService;
}
}

注意:这里我用的是ModelDriven的方式获取表单数据,而在使用ajax的时候,直接传了一个userNiName(昵称)过来,于是我在UserAction中加了一个私有字符串变量userNiName,并设置了set方法.结果死活传不过值来,传过来的是一个null,于是我将私有变量删掉,然后直接用user.getUserNiName()直接获取就得到了.切记.

UserService(省略).

User类(省略).

UserDao:

package com.wang.shop.user.dao;
import java.util.List;

import org.springframework.orm.hibernate4.support.HibernateDaoSupport;
import com.wang.shop.user.entity.User;
public class UserDao extends HibernateDaoSupport{
/**
* 通过用户昵称查询User
* @param userNiName
* @return
*/
public User findUserByName(String userNiName){
List<User> list = (List<User>) this.getHibernateTemplate().find("select u from User u where u.userNiName=?", userNiName);
if(list!=null&&list.size()>0){
System.out.println("list:"+list.get(0));
return list.get(0);
}
return null;
}
}

struts.xml:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
"http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
<package name="shop" namespace="/" extends="struts-default">
<!-- UserAction -->
<action name="user_*" class="userAction" method="{1}">
<result name="regist_succ">/WEB-INF/jspForUser/login.jsp</result>
<result type="stream" name="ajax_succ">
<param name="contentType">text/html</param>
<param name="inputStream">inputStream</param>
</result>
</action>
</package>
</struts>

注意在result标签中,type="stream".

最后顺带说一句,我在调试的时候习惯使用输出语句,但每次加一句输出语句都需要重启Tomcat,好烦.于是参考网上的方式,将Tmocat安装目录下,conf->server.xml中在<host>标签下添加了以下代码,就可以修改类(细微的修改)的时候,不需要重启服务器了:

<!--docBase就是你的项目工程所在的全路径,path就是写你的项目名,reloadable="true",可以自动重新加载修改过的class文件-->
<Context debug="0" docBase="D:\Tomcat 7.0\webapps\SSH_shop01" path="/SSH_shop01" reloadable="true" />

需要特别注意的是,当在Tomcat中卸载了该项目后,一定要回来将这个标签删除.

使用struts2+Ajax+jquery验证用户名是否已被注册的知识,小编就给大家介绍这么多,希望对大家有所帮助!

Javascript 相关文章推荐
js 弹出菜单/窗口效果
Oct 30 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
Aug 05 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
Jun 05 Javascript
JavaScript实现select添加option
Jul 03 Javascript
JS留言功能的简单实现案例(推荐)
Jun 23 Javascript
JS中的作用域链
Mar 01 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 Javascript
详解Node全局变量global模块
Sep 28 Javascript
详解VUE2.X过滤器的使用方法
Jan 11 Javascript
实例详解带参数的 npm script
May 28 Javascript
前端深入理解Typescript泛型概念
Mar 09 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
Nov 09 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
Mar 22 #Javascript
Node.js文件操作方法汇总
Mar 22 #Javascript
浅谈Sticky组件的改进实现
Mar 22 #Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 #Javascript
关于JS中match() 和 exec() 返回值和属性的测试
Mar 21 #Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
Mar 21 #Javascript
快速掌握Node.js事件驱动模型
Mar 21 #Javascript
You might like
PHP编程中八种常见的文件操作方式
2006/11/19 PHP
php生成静态html页面的方法(2种方法)
2015/09/14 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
JavaScript学习历程和心得小结
2010/08/16 Javascript
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
js Function类型
2011/12/04 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
JS操作数据库的实例代码
2013/10/17 Javascript
JS、CSS加载中的小问题探讨
2013/11/26 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
2016/07/27 Javascript
JS插件plupload.js实现多图上传并显示进度条
2016/11/29 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
vue组件父与子通信详解(一)
2017/11/07 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
2020/02/02 Javascript
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
python显示天气预报
2014/03/02 Python
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
分析python请求数据
2018/08/19 Python
Scrapy框架爬取西刺代理网免费高匿代理的实现代码
2019/02/22 Python
后勤服务中心总经理工作职责
2014/03/03 职场文书
年终晚会活动方案
2014/08/21 职场文书
幼儿园八一建军节活动方案
2014/08/27 职场文书
书法社团活动总结
2015/05/07 职场文书
高中政治教学反思
2016/02/23 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书