欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery easyUI中ajax異步校驗(yàn)用戶名

 更新時(shí)間：2016年08月19日 10:55:18   作者：Forlangel  
這篇文章主要為大家詳細(xì)介紹了jquery easyUI中ajax異步校驗(yàn)用戶名，感興趣的小伙伴們可以參考一下

以前無(wú)聊寫過(guò)一個(gè)小東西，其中有一個(gè)功能就是添加用戶，當(dāng)時(shí)并沒(méi)有考慮用戶名重復(fù)的問(wèn)題，今日閑來(lái)無(wú)事，打算利用ajax的異步刷新來(lái)校驗(yàn)用戶名是否存在。自己也是新手，剛剛大三，哈哈寫的不對(duì)的地方請(qǐng)指出。
放上效果圖：


首先是編寫前的準(zhǔn)備

我并不是用原生的js來(lái)寫的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;//這里設(shè)置一個(gè)標(biāo)識(shí)符用于后面阻止表單的提交
$(function(){

  //表單的驗(yàn)證
  $('#fname').validatebox({
   required:true , 
   missingMessage:'用戶名不能為空!' ,
   precision:0
  });
  $('#floginname').validatebox({
   required:true , 
   missingMessage:'登錄名不能為空!',
   precision:0
  });
  //對(duì)于添加按鈕的綁定
  $('#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("未選擇樹(shù)。。。");
 }
};
/** 
 * AJAX異步校驗(yàn)用戶名 
 */

function checkUserName(){  
 var floginname = $("#floginname").val();  
 $.ajax({
  url :"${contextPath}/peixun/checkUserName.action",
  type:'POST',
  data:{
   loginname:floginname
  },   
  dataType:'json',
  success:function(data){
  //根據(jù)后臺(tái)返回的數(shù)據(jù)來(lái)進(jìn)行判斷，并給出提示。
   if (data.type == "true") {
    $("#label")[0].innerHTML="<font color='red'>登錄名重復(fù)</font>";
    isExist = true;
   }else if(data.type == "false") {
    $("#label")[0].innerHTML="<font color='green'>恭喜你,登錄名可以使用</font>";
    isExist = false;
   }
  },
  error:function(data){
   alert("獲取用戶信息失敗，請(qǐng)聯(lián)系管理員！");
  }
 });


}

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

 /**
  * 校驗(yàn)用戶名是否存在的方法
  */
 public String checkUserName(){
  try{
   if(loginname !=null&&loginname !=null){
   //這里通過(guò)daoImpl返回的數(shù)據(jù)來(lái)進(jìn)行判斷
    int count=this.peixunService.checkUserName(loginname);
    if(count==1){
    //將結(jié)果true放到 type中返回給前臺(tái)
     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校驗(yàn)
  */
 @SuppressWarnings("unchecked")
 @Override
 public int checkUserName( String loginname) {
   //設(shè)置一個(gè)標(biāo)識(shí)符用于返回 
   int flag = 0;
   try{ 
    StringBuffer sbf=new StringBuffer();
    sbf.append("from UUser u where u.floginname =");
    sbf.append("'"+loginname+"'");
    //如果從數(shù)據(jù)庫(kù)中查詢出數(shù)據(jù)，表示用戶名重復(fù)
    List<UUser> list =this.getHibernateTemplate().find(sbf.toString());
    if( list.size() > 0){   
     flag = 1;  
    } 
   }catch(Exception e){
    e.printStackTrace();
   }
   return flag;

 }

}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • jquery 事件執(zhí)行檢測(cè)代碼

    jquery 事件執(zhí)行檢測(cè)代碼

    在寫Web 應(yīng)用，或者Web Ajax功能的時(shí)候我們經(jīng)常需要處理事件，jquery已經(jīng)非常完美的封裝了事件，但是有時(shí)候事件的執(zhí)行順序還是會(huì)有微小差別
    2009-12-12
  • jQuery插件echarts實(shí)現(xiàn)的多柱子柱狀圖效果示例【附demo源碼下載】

    jQuery插件echarts實(shí)現(xiàn)的多柱子柱狀圖效果示例【附demo源碼下載】

    這篇文章主要介紹了jQuery插件echarts實(shí)現(xiàn)的多柱子柱狀圖效果,結(jié)合完整實(shí)例形式分析了echarts繪制多柱子柱狀圖效果的操作步驟與相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
    2017-03-03
  • 用圖片替換checkbox原始樣式并實(shí)現(xiàn)同樣的功能

    用圖片替換checkbox原始樣式并實(shí)現(xiàn)同樣的功能

    這篇文章主要介紹了用圖片替換checkbox原始樣式并實(shí)現(xiàn)同樣的功能 ，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
    2018-11-11
  • 詳談jQuery Ajax(load,post,get,ajax)的用法

    詳談jQuery Ajax(load,post,get,ajax)的用法

    下面小編就為大家?guī)?lái)一篇詳談jQuery Ajax(load,post,get,ajax)的用法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-03-03
  • jquery 簡(jiǎn)單圖片導(dǎo)航插件jquery.imgNav.js

    jquery 簡(jiǎn)單圖片導(dǎo)航插件jquery.imgNav.js

    前幾天某MM要偶幫忙實(shí)現(xiàn)栗子汀首頁(yè)的圖片導(dǎo)航效果，很簡(jiǎn)單而且具有通用性的一個(gè)需求，點(diǎn)圖片A切換圖片A相關(guān)的內(nèi)容，點(diǎn)圖片B切換圖片B相關(guān)的內(nèi)容，僅此而已。
    2010-03-03
  • jQuery實(shí)現(xiàn)原理的模擬代碼 -6 代碼下載

    jQuery實(shí)現(xiàn)原理的模擬代碼 -6 代碼下載

    前幾篇文章中的示例代碼，去掉了幾個(gè) bug, 這里一起提供下載。
    2010-08-08
  • jQuery中的height innerHeight outerHeight區(qū)別示例介紹

    jQuery中的height innerHeight outerHeight區(qū)別示例介紹

    這篇文章主要介紹了jQuery中的height innerHeight outerHeight的區(qū)別,需要的朋友可以參考下
    2014-06-06

    • 最新評(píng)論