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