jquery easyUI中ajax异步校验用户名


Posted in Javascript onAugust 19, 2016

以前无聊写过一个小东西,其中有一个功能就是添加用户,当时并没有考虑用户名重复的问题,今日闲来无事,打算利用ajax的异步刷新来校验用户名是否存在。自己也是新手,刚刚大三,哈哈写的不对的地方请指出。
放上效果图:

jquery easyUI中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;

 }

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript之querySelector和querySelectorAll使用说明
Oct 09 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
Nov 24 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 Javascript
基于JavaScript代码实现微信扫一扫下载APP
Dec 30 Javascript
理解javascript中Map代替循环
Feb 26 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
Jan 23 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 Javascript
JavaScript实现放大镜效果代码示例
Apr 29 Javascript
react ant Design手动设置表单的值操作
Oct 31 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
js canvas实现五子棋小游戏
Jan 22 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
Aug 19 #Javascript
AngularJS入门教程之REST和定制服务详解
Aug 19 #Javascript
js自调用匿名函数的三种写法(推荐)
Aug 19 #Javascript
AngularJS 入门教程之事件处理器详解
Aug 19 #Javascript
jQuery增加、删除及修改select option的方法
Aug 19 #Javascript
浅谈jquery设置和获得checkbox选中的问题
Aug 19 #Javascript
AngularJS入门教程之过滤器详解
Aug 19 #Javascript
You might like
将一维或多维的数组连接成一个字符串的php代码
2010/08/08 PHP
PHP验证码函数代码(简单实用)
2013/09/29 PHP
PHP调用C#开发的dll类库方法
2014/07/28 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
仿服务器端脚本方式的JS模板实现方法
2007/04/27 Javascript
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
解决json日期格式问题的3种方法
2014/02/02 Javascript
浅谈JS中String()与 .toString()的区别
2016/10/20 Javascript
微信小程序 开发工具快捷键整理
2016/10/31 Javascript
微信小程序 自定义对话框实例详解
2017/01/20 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
javascript实现循环广告条效果
2017/12/12 Javascript
node.js通过axios实现网络请求的方法
2018/03/05 Javascript
深入理解JavaScript的async/await
2018/08/05 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
详细介绍Ruby中的正则表达式
2015/04/10 Python
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
Python构建XML树结构的方法示例
2017/06/30 Python
Python 逐行分割大txt文件的方法
2017/10/10 Python
Python处理菜单消息操作示例【基于win32ui模块】
2018/05/09 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
Python Django搭建网站流程图解
2020/06/13 Python
解决python运行效率不高的问题
2020/07/20 Python
Python安装并操作redis实现流程详解
2020/10/13 Python
印尼最大的在线购物网站:MatahariMall.com
2016/08/26 全球购物
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
德国家具、照明、家居用品网上商店:Wayfair.de
2020/02/13 全球购物
Javascript如何发送一个Ajax请求
2015/01/26 面试题
市场营销毕业生自荐信
2013/11/23 职场文书
二年级语文教学反思
2014/02/02 职场文书
先进事迹演讲稿
2014/09/01 职场文书
教师年度个人总结
2015/02/11 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
Java字符串逆序方法详情
2022/03/21 Java/Android
vue+iview实现手机号分段输入框
2022/03/25 Vue.js
win10清理dns缓存
2022/04/19 数码科技