jquery easyUI中ajax異步校驗(yàn)用戶名
更新時間：2016年08月19日 10:55:18 作者：Forlangel
這篇文章主要為大家詳細(xì)介紹了jquery easyUI中ajax異步校驗(yàn)用戶名，感興趣的小伙伴們可以參考一下
以前無聊寫過一個小東西，其中有一個功能就是添加用戶，當(dāng)時并沒有考慮用戶名重復(fù)的問題，今日閑來無事，打算利用ajax的異步刷新來校驗(yàn)用戶名是否存在。自己也是新手，剛剛大三，哈哈寫的不對的地方請指出。
放上效果圖：
首先是編寫前的準(zhǔn)備
我并不是用原生的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;//這里設(shè)置一個標(biāo)識符用于后面阻止表單的提交
$(function(){
//表單的驗(yàn)證
$('#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異步校驗(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ù)后臺返回的數(shù)據(jù)來進(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("獲取用戶信息失敗，請聯(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){
//這里通過daoImpl返回的數(shù)據(jù)來進(jìn)行判斷
int count=this.peixunService.checkUserName(loginname);
if(count==1){
//將結(jié)果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校驗(yàn)
*/
@SuppressWarnings("unchecked")
@Override
public int checkUserName( String loginname) {
//設(shè)置一個標(biāo)識符用于返回
int flag = 0;
try{
StringBuffer sbf=new StringBuffer();
sbf.append("from UUser u where u.floginname =");
sbf.append("'"+loginname+"'");
//如果從數(shù)據(jù)庫中查詢出數(shù)據(jù)，表示用戶名重復(fù)
List<UUser> list =this.getHibernateTemplate().find(sbf.toString());
if( list.size() > 0){
flag = 1;
}
}catch(Exception e){
e.printStackTrace();
}
return flag;
}
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
使用jquery拖拽排序插件制作拖拽排序效果是一款非常實(shí)用的鼠標(biāo)拖拽布局插件，在網(wǎng)站上有時也會用的到，今天小編給大家分享jQuery拖拽排序插件制作拖拽排序效果，需要的朋友參考下吧2016-02-02
這篇文章主要介紹了jQuery div拖拽用法,以完整實(shí)例形式分析了jQuery結(jié)合UI插件實(shí)現(xiàn)拖拽功能的相關(guān)技巧,需要的朋友可以參考下2016-01-01
jQuery實(shí)現(xiàn)的個性化返回底部與返回頂部特效代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的個性化返回底部與返回頂部特效代碼,涉及jQuery結(jié)合動畫函數(shù)響應(yīng)鼠標(biāo)事件動態(tài)改變頁面元素樣式的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
本文給大家分享最常用的jquery表單驗(yàn)證實(shí)例代碼，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-05-05
jQuery實(shí)現(xiàn)氣球彈出框式的側(cè)邊導(dǎo)航菜單效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)氣球彈出框式的側(cè)邊導(dǎo)航菜單效果,通過css樣式控制結(jié)合jQuery響應(yīng)鼠標(biāo)事件動態(tài)切換元素樣式實(shí)現(xiàn)提示框效果,非常美觀實(shí)用,需要的朋友可以參考下2015-09-09
jQuery實(shí)現(xiàn)元素拖拽并cookie保存順序的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)元素拖拽并cookie保存順序的方法,涉及jQuery響應(yīng)鼠標(biāo)事件實(shí)現(xiàn)頁面元素屬性變換的技巧與使用jQuery的cookie插件保存頁面信息的功能,需要的朋友可以參考下2016-02-02
項(xiàng)目需要做一個頭像截取的功能，類似于QQ頭像截取功能。在網(wǎng)上搜了下，最后使用jQuery插件jcrop來截取2013-11-11
jQuery確實(shí)是一個挺好的輕量級的JS框架，能幫助我們快速的開發(fā)JS應(yīng)用，并在一定程度上改變了我們寫JavaScript代碼的習(xí)慣。2010-12-12
JQuery實(shí)現(xiàn)動態(tài)漂浮廣告
這篇文章主要為大家詳細(xì)介紹了JQuery實(shí)現(xiàn)動態(tài)漂浮廣告，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
本文給大家分享一款簡單但實(shí)用的多級垂直手風(fēng)琴下拉菜單列表，完全使用css來制作多級手風(fēng)琴菜單，通過該代碼將不同的子菜單進(jìn)行分組制作出多級菜單的效果，本文附效果演示和源碼下載感興趣的朋友一起學(xué)習(xí)吧2015-11-11