jquery easyUI中ajax异步校验用户名

前端技术 2023/09/06 JavaScript

以前无聊写过一个小东西，其中有一个功能就是添加用户，当时并没有考虑用户名重复的问题，今日闲来无事，打算利用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;

 }

}

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

本文地址：https://www.stayed.cn/item/15732

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案