Forlangel 通过本文主要向大家介绍了jquery,easyUI,ajax,异步校验等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
以前无聊写过一个小东西，其中有一个功能就是添加用户，当时并没有考虑用户名重复的问题，今日闲来无事，打算利用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