jquery easyUI中ajax异步校验用户名_jquery

以前无聊写过一个小东西，其中有一个功能就是添加用户，当时并没有考虑用户名重复的问题，今日闲来无事，打算利用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
， ajax
， easyui
异步校验
ajax异步校验、ajax异步验证用户名、ajax校验用户名、java ajax校验用户名、easyui tree 异步加载，以便于您获取更多的相关知识。

时间： 2024-04-06 15:08:28

jquery easyUI中ajax异步校验用户名_jquery的相关文章

浅析jQuery EasyUI中的tree使用指南_jquery

本文记录的是带领成员开发一个小模块功能的时候,需要用到弹出窗口加载树状级联单位选择,最后决定用采用jQuery+EasyUI插件进行开发.但是在使用EasyUI中tree的插件时,碰到了不少麻烦.为了提供弹出树的显示速度,就采用异步加载数节点值,首先先加载根节点,然后根据点击的节点展开加载子节点. 往往结果和预期的都不一样,困惑了几天,展开后子节点是动态加载了,但是收缩后无法清空之前填充的数据:第二次在展开时,子节点又被重复加载了一遍,造成了数据重复显示,并没有提供清除子节点的方法.想尽了各种办

浅谈Jquery中Ajax异步请求中的async参数的作用_jquery

之前不知道这个参数的作用,上网找了前辈的博客,在此收录到自己的博客,希望能帮到更多的朋友: test.html <a href="javascript:void(0)" onmouseover="testAsync()"> asy.js function testAsync{ var temp; $.ajax({ async: false, type : "GET", url : 'tet.php', complete: functi

jQuery EasyUI中DataGird动态生成列的方法_jquery

EasyUI中使用DataGird显示数据列表中,有时需要根据需要显示不同的列,例如,在权限管理中,不同的用户登录后只能查看自己权限范围内的列表字段,这就需要DataGird动态组合列,下面介绍EasyUI中DataGird动态生成列的方法. DataGird动态生成列,实际上就是控制DataGird的 columns 属性值,下面通过ajax异步调用后台columns的数据,进行绑定. <table id="dg"></table> <script>

jQuery EasyUI中的日期控件DateBox修改方法_jquery

jQuery EasyUI中的日期控件DateBox很好用的,首先需要引入jquery文件,代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic DateBox - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/cs

jQuery+easyui中的combobox实现下拉框特效

 这篇文章主要介绍了jQuery+easyui中的combobox实现下拉框特效的几种方法,非常简单实用,需要的朋友可以参考下     1.第一种写法:Input框中显示:   代码如下: <input id="cc" class="easyui-combobox" name="name" data-options="valueField:'value',textField:'text',data:[{'value':'1','t

jQuery easyUI form ajax提交是假的吗？？

问题描述 jQuery easyUI form ajax提交是假的吗?? 5C 今天学习easyUI的form表单,说他有个ajax提交数据的功能,我在服务器端设置了一道屏障,如果不是ajax请求则跳转到404页面.结果,每次提交表单都是404了,看了下请求头,根本不是ajax提交.我对比了一下其他ajax请求头,成功的都会有个 X-Request-With:""XMLHttpRequest"" 但是form的ajax方式就没有easyUI所说的ajax提交是不是假

jquery-关于JQuery easyui中numberbox鼠标点击事件问题？

问题描述 关于JQuery easyui中numberbox鼠标点击事件问题? 如标题 当我修改是鼠标点击文本框时 里面的数据就清空了 jsp <td class="form_label" id="setlable">总剧集数:</td> <td> <input type="text" id="collectionNumber" name="collectionNumber&

jquery easyui中的combobox问题

问题描述 jquery easyui中的combobox问题 使用了jquery easyui中的combobox 之后,select下拉框的默认值变成了&nbsp:而且弄不掉,请问这是什么愿意那 解决方案 你的代码发出来看下..你自己设置的内吧..还有easyUI版本是什么 解决方案二: 为什么在option加?有什么作用吗? 解决方案三: JQuery EasyUI comboboxjquery easyui comboboxeasyUI的Combobox问题

jQuery 中ajax异步调用的四种方式_jquery

<script type="text/javascript" language="javascript" src="JS/jquery-1[1].2.3.min.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ //Jquery