前端交流

会员登录 jfk框架 我的简历 注册会员 Email:weizeyan52@126.com

前端技术

jquery的ajax return问题: 作者：魏泽言发布时间：2010-08-20 15:53:39

一般注册会员的表单内都包含Email验证，这块需要ajax支持，这里我使用jquery 库，但是其ajax保持设置的话，我们只有在判断请求成功和失败李执行相应的回调，但是如果我把这个$.ajax() 封装到函数内，我想通过ajax返回状态和数据类型对该函数返回相应的值，作为外部接口调用，函数内的ajax实现一般我们都这样做：

function xxx(){

var ajaxEmailIsChecked=false;

$.ajax({
    type:"post",
    url:"jfk.ui.formValidate/checkemail.php",

    data:{email:val},
    success:function(data){
     if(data.state===true){
      next.show().html("该email可以使用").addClass("rightstyle");
      ajaxEmailIsChecked=true;
      return true;
     }else{
      next.show().html(data.msg).removeClass("rightstyle");
      ajaxEmailIsChecked=false;
      return false;
     };

return ajaxEmailIsChecked;

}

但是出乎意料的是，外部调用该接口后，结果并没有符合我们的意愿表情6 ，原因是jquery.ajax 内的async的属性默认值是true,即为异步，这样的话，后面的代码都不会执行，而是指向其内部的回调，

设为false也就是同步后，ajax下面的语句都可以一一执行表情30 了！

演示地址：

http://designcss.org/jquery-plugin/jfk/jfk.ui.formValidate2.html

或者看代码(ajax for email 的路径可能出错，自己修改好了)：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="shin.css"  />
<style>
	.rightstyle{ color: #009933!important;}
</style>
<script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
	function __check(){
		var _button=$("#subbutton");
		if (checkEmail($("#email")) && checkUserName($("#username"))  ){
			_button.attr({disabled:true});
			return true;
		}else{
			return false;	
		}
	};
	 
	function checkUserName(obj){
		var val=$.trim(obj.val());
		var next=obj.next();
		var pat=/^[a-zA-Z]+[a-zA-Z0-9_]{5,11}$/;
		if( !pat.test(val)){
			next.show().html("用户名不合法，6-12个字符(字母数字下划线组合，开头必须为字母)").removeClass("rightstyle");
			return false;	
		}else{
			next.show().html("填写正确").addClass("rightstyle");
			return true;	
		};
	};
	function checkEmail(obj){
		var ajaxEmailIsChecked=false;
		var val=$.trim(obj.val());
		var next=obj.next();
		var pat=/^(\w+)@(\w+)((\.[a-zA-Z]+))+$/;
		if( pat.test(val)){
			$.ajax({
				type:"post",
				url:"jfk.ui.formValidate/checkemail.php",
				async:false,
				data:{email:val},
				success:function(data){
					if(data.state===true){
						next.show().html("该email可以使用").addClass("rightstyle");
						ajaxEmailIsChecked=true;
						return true;
					}else{
						next.show().html(data.msg).removeClass("rightstyle");
						ajaxEmailIsChecked=false;
						return false;	
					};	
				},
				dataType:"json"
			});
			
			return ajaxEmailIsChecked;
		}else{
			next.show().html("邮件格式不合法").removeClass("rightstyle");
			ajaxEmailIsChecked=false;
			return false;	
		}; 
	};
</script>
<style>
	.formContainer{ border:1px solid #ddd; padding:12px; width:600px; margin:0 auto; line-height:24px;}
	.formContainer .tips{ color:#f00; display:none;}
	.formContainer li{ padding-bottom:10px;}
</style>
</head>

<body>
	
	<div class="formContainer">
		<form  action="http://www.baidu.com" onsubmit="return __check();"  method="post" >
			<ul>
				<li>电子邮件:  <input onblur="checkEmail($(this));" type="text" name="email" id="email" />  <span class="tips"></span></li>
				<li>用户昵称:  <input onblur="checkUserName($(this));" type="text" name="username" id="username" />  <span class="tips"></span></li>
				<li><input   id="subbutton" type="submit" value="checkForm" /></li>
			</ul>
		</form>
	</div>

</body>
</html>

jquery的ajax return问题的相关评论

文明社会，从理性发言开始。谢绝地域攻击。