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; } @Overridepublic 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; }}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。