jquery easyUI中ajax异步校验用户名
更新时间：2016年08月19日 10:55:18 作者：Forlangel
这篇文章主要为大家详细介绍了jquery easyUI中ajax异步校验用户名，感兴趣的小伙伴们可以参考一下
以前无聊写过一个小东西，其中有一个功能就是添加用户，当时并没有考虑用户名重复的问题，今日闲来无事，打算利用ajax的异步刷新来校验用户名是否存在。自己也是新手，刚刚大三，哈哈写的不对的地方请指出。
放上效果图：
首先是编写前的准备
我并不是用原生的js来写的ajax而是用的jqueryeasyUI框架中的ajax,所以在使用之前就必须要引入jquery的js文件。
<link rel="stylesheet" type="text/css" href="${contextPath}/pages/introcontrol/util/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${contextPath}/pages/introcontrol/util/themes/icon.css">
<script type="text/javascript" src="${contextPath}/pages/introcontrol/util/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="${contextPath}/pages/introcontrol/util/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${contextPath}/pages/introcontrol/util/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
首先是在jsp文件中的编写
var isExist = true;//这里设置一个标识符用于后面阻止表单的提交
$(function(){
//表单的验证
$('#fname').validatebox({
required:true ,
missingMessage:'用户名不能为空!' ,
precision:0
});
$('#floginname').validatebox({
required:true ,
missingMessage:'登录名不能为空!',
precision:0
});
//对于添加按钮的绑定
$('#addBtn').bind('click',function(){
addUser();
});
});
/**
* 添加用户
*/
function addUser(){
var obj = $('#orgTree').tree('getSelected');
if(obj){
$('#fdepname').val($('#orgTree').tree('getSelected').text);
$('#fdepid').val($('#orgTree').tree('getSelected').id);
$('#operator_user').dialog({
width:350,
height:300,
title:'新增管理',
modal:true,
buttons:[{
text:'提交',
handler: function(){
//判断是否符合条件
if(!isExist){
if($('#operator_user').form('validate')){
$.ajax({
url:"<%=request.getContextPath()%>/peixun/addUser.action",
type:"post",
dataType:'json',
data:$('#myform').serialize(),
success:function(data,response,status){
if(data.type=='success'){
$.messager.alert("提示","新增成功!");
$('#sysUserTable').datagrid('reload');
$('#operator_user').dialog('close');
//清空表单
$('#myform')[0].reset();
}else{
$.messager.alert("提示","新增失败!");
}
}
});
}
}
}
},{
text:'取消',
handler: function(){
$('#operator_user').dialog('close');
$('#myform')[0].reset();
}
}],
});
}else if(obj==null){
alert("未选择树。。。");
}
};
/**
* AJAX异步校验用户名
*/
function checkUserName(){
var floginname = $("#floginname").val();
$.ajax({
url :"${contextPath}/peixun/checkUserName.action",
type:'POST',
data:{
loginname:floginname
},
dataType:'json',
success:function(data){
//根据后台返回的数据来进行判断，并给出提示。
if (data.type == "true") {
$("#label")[0].innerHTML="<font color='red'>登录名重复</font>";
isExist = true;
}else if(data.type == "false") {
$("#label")[0].innerHTML="<font color='green'>恭喜你,登录名可以使用</font>";
isExist = false;
}
},
error:function(data){
alert("获取用户信息失败，请联系管理员！");
}
});
}
Action部分
package ais.peixun.web;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import ais.adl.model.TreeNode;
import ais.framework.struts.BaseAction;
import ais.framework.util.UUID;
import ais.peixun.service.PeixunService;
import ais.user.model.UUser;
public class PeixunAction extends BaseAction {
private static final long serialVersionUID = 6269156200927918770L;
private PeixunService peixunService;
private Map<String, Object> resultMap = new HashMap<String, Object>();
private UUser user;
private String id;
private String fname;
private String floginname;
private String name;
private String loginname;
private String fsex;
/**
* 添加用户
**
public String addUser(){
try{
if(user !=null){
String id = new UUID().toString();
user.setFuserid(id);
Serializable ser = this.peixunService.addOneUser(user);
if(ser != null && ser!=""){
this.resultMap.put("type","success");
}else{
this.resultMap.put("type","error");
}
}
}catch(Exception e){
e.printStackTrace();
}
return SUCCESS;
}
/**
* 校驗用戶名是否存在的方法
*/
public String checkUserName(){
try{
if(loginname !=null&&loginname !=null){
//这里通过daoImpl返回的数据来进行判断
int count=this.peixunService.checkUserName(loginname);
if(count==1){
//将结果true放到 type中返回给前台
this.resultMap.put("type","true");
}else{
this.resultMap.put("type","false");
}
}
}catch(Exception e){
e.printStackTrace();
}
return SUCCESS;
}
public PeixunService getPeixunService() {
return peixunService;
}
public void setPeixunService(PeixunService peixunService) {
this.peixunService = peixunService;
}
public Map<String, Object> getResultMap() {
return resultMap;
}
public void setResultMap(Map<String, Object> resultMap) {
this.resultMap = resultMap;
}
public String getFname() {
return fname;
}
public void setFname(String fname) {
this.fname = fname;
}
public String getFloginname() {
return floginname;
}
public void setFloginname(String floginname) {
this.floginname = floginname;
}
public String getFsex() {
return fsex;
}
public void setFsex(String fsex) {
this.fsex = fsex;
}
public String getFdepname() {
return fdepname;
}
public void setFdepname(String fdepname) {
this.fdepname = fdepname;
}
public UUser getUser() {
return user;
}
public void setUser(UUser user) {
this.user = user;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getLoginname() {
return loginname;
}
public void setLoginname(String loginname) {
this.loginname = loginname;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
}
Service以及ServiceImpl
package ais.peixun.service;
import java.io.Serializable;
import java.util.List;
import java.util.Map;
import ais.adl.model.TreeNode;
import ais.framework.service.IBaseService;
import ais.user.model.UUser;
public interface PeixunService extends IBaseService {
public Serializable addOneUser(UUser user);
public int checkUserName(String loginname);
}
package ais.peixun.service.impl;
import java.io.Serializable;
import java.util.List;
import java.util.Map;
import ais.adl.model.TreeNode;
import ais.framework.service.impl.BaseServiceImpl;
import ais.peixun.dao.PeixunDao;
import ais.peixun.service.PeixunService;
import ais.user.model.UUser;
public class PeixunServiceImpl extends BaseServiceImpl implements PeixunService {
private PeixunDao peixunDao;
public PeixunDao getPeixunDao() {
return peixunDao;
}
public void setPeixunDao(PeixunDao peixunDao) {
this.peixunDao = peixunDao;
}
@Override
public Serializable addOneUser(UUser user){
return this.peixunDao.addOneUser( user);
}
@Override
public int checkUserName(String loginname) {
return this.peixunDao.checkUserName(loginname);
}
}
Dao以及DaoImpl
package ais.peixun.dao;
import java.io.Serializable;
import java.util.List;
import java.util.Map;
import ais.adl.model.TreeNode;
import ais.framework.dao.IBaseDAO;
import ais.user.model.UUser;
public interface PeixunDao extends IBaseDAO {
public Serializable addOneUser(UUser user);
public int checkUserName(String loginname);
}
package ais.peixun.dao.impl;
import java.io.Serializable;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import org.hibernate.HibernateException;
import org.hibernate.Query;
import org.hibernate.Session;
import org.springframework.dao.DataAccessException;
import org.springframework.orm.hibernate3.HibernateCallback;
import com.sybase.jdbc2.jdbc.Convert;
import ais.adl.model.TreeNode;
import ais.framework.dao.hibernate.BaseDAOImpl;
import ais.organization.model.UOrganization;
import ais.peixun.dao.PeixunDao;
import ais.resmngt.audobj.model.AuditingObject;
import ais.user.model.UUser;
/**
* @author Forlangel
*
*/
public class PeixunDaoImpl extends BaseDAOImpl implements PeixunDao {
/*
* 添加用户
*/
@Override
public Serializable addOneUser(UUser user) {
Serializable ser;
try{
ser = this.getHibernateTemplate().save(user);
}catch(Exception e){
e.printStackTrace();
return null;
}
return ser;
}
/*
* ajax校验
*/
@SuppressWarnings("unchecked")
@Override
public int checkUserName( String loginname) {
//设置一个标识符用于返回
int flag = 0;
try{
StringBuffer sbf=new StringBuffer();
sbf.append("from UUser u where u.floginname =");
sbf.append("'"+loginname+"'");
//如果从数据库中查询出数据，表示用户名重复
List<UUser> list =this.getHibernateTemplate().find(sbf.toString());
if( list.size() > 0){
flag = 1;
}
}catch(Exception e){
e.printStackTrace();
}
return flag;
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了jQuery插件实现文件上传功能，可支持拖拽文件上传，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-06-06
在ASP.net中母版页加载js文件，页面中调用时出错、tablesorter加载失败等等,需要的朋友可以参考下2014-02-02
unlock.js插件具有滑动解锁，尺寸、颜色、字体大小等都可以个性化定制等特点，接下来通过本文给大家分享jQuery使用unlock.js插件实现滑动解锁思路讲解，感兴趣的朋友一起看看吧2017-04-04
本文是通过nanoscrollerjs简单实现Mac OS 系统滚动条效果特效，以及本插件的使用方法和参数，非常不错，这里推荐给大家。2015-02-02
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
这篇文章主要介绍了超好用的jQuery分页插件jpaginate用法,结合实例形式简单分析了jQuery分页插件jpaginate的基本调用方式、参数属性及配置方法,并附带源码供读者下载,需要的朋友可以参考下2018-12-12
这篇文章主要介绍了jQuery的几种选择器详解,Query 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素, 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器,需要的朋友可以参考下2023-05-05
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
这篇文章主要介绍了jQuery插件HighCharts实现气泡图效果,结合完整实例形式分析了jQuery插件HighCharts绘制气泡图的实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了使用jQuery重置(reset)表单的方法,需要的朋友可以参考下2014-05-05
下面小编就为大家带来一篇完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-12-12
这篇文章主要为大家详细介绍了Ztree行政地区树状展示,点击加载数据，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
最新评论