无法从jquery中的函数返回ajax responseText

时间:2015-02-25 17:19:00

标签: javascript jquery ajax

我有一张表格供用户注册新帐户。我使用jquery + ajax检查模糊的电子邮件地址的可用性。在Jquery代码中,我使用了e.preventDefault();如果发生任何错误,请阻止表单提交。我在电子邮件输入中尝试了现有的电子邮件地址,然后单击“提交表单”。它允许表单提交。它不应该这样做,因为ajax reponseText返回false。请有人告诉我应该修复此代码的工作原理吗?我也读过similiar article,我试过但仍然无效。请帮我指出我需要修复当前代码的内容?

这是我的表格:

<form role="form" method="post" id="signupForm" action="index.php?view=signup-gv">
                <div class="col-xs-6 border-right">
                    <div class="form-group">
                        <label for="exampleInputEmail1">Full Name</label>
                        <input type="text" class="form-control" id="regname" name="regname" placeholder="Full Name">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">Email Address</label><span id="emailcheck"></span>
                        <input type="email" class="form-control" id="regemail" name="regemail" placeholder="Enter email">
                    </div>
                </div>
                <div class="form-group col-xs-6">
                    <label for="exampleInputPassword1">Password</label>
                    <input type="password" class="form-control" id="regpass" name="regpass" placeholder="Password">
                </div>
                <button style="position:relative; left: 15px; top: 10px;" class="btn btn-default" name="register" id="register">Register</button>
            </form>

这是我的jquery代码:

$(document).ready(function(){
$('#regname').focus(); 
$('#regemail').blur(emailCheck);
$('#signupForm').submit(function(e) {
var regname = $('#regname'); 
var regemail = $('#regemail'); 
var regpass = $('#regpass'); 
var register_result = $('#register_result'); 
register_result.html('Loading..'); 
if(regname.val() == ''){ 
    regname.focus();
    register_result.html('<span class="errorss"> * Full name can not be blank</span>');
    e.preventDefault();
}
else if ($.trim(regemail.val()).length == 0) {
    regemail.focus(); 
    register_result.html('<span class="errorss">* Email address can not be blank</span>');
    e.preventDefault();
}
 else if (emailCheck()==false) {
    regemail.focus(); 
    register_result.html('<span class="errorss"> This email address is already existed. Please choose another one </span>');
    e.preventDefault();
}
else if(regpass.val() == ''){ 
    regpass.focus();
    register_result.html('<span class="errorss">* Password can not be blank</span>');
    e.preventDefault();
}

});
});
function emailCheck() {
var regemail = $('#regemail'); 
var emailcheck = $('#emailcheck');
emailcheck.html(''); 
var UrlToPass = {regemail:regemail.val()} ;
    $.ajax({ 
    type : 'POST',
    cache: false,
    data : UrlToPass,
    url  : 'emailcheck.php',
    success: function(responseText){ 
        if(responseText == 0){
            return true;
        }
        else{
            emailcheck.html('<span class="errorss"> This email is existed.</span>');
            return false;
        }
    }
    });
}

1 个答案:

答案 0 :(得分:1)

所以,问题是:你试图从异步函数返回。当您尝试在emailCheck回调函数中返回“true”或“false”时,您的函数success已经结束而没有返回任何内容。

因此,当您声明一个函数submit时,您应该知道在返回ajax调用之后,您只能继续提交。我建议你始终从submit返回false,然后,只有在你的回调中,你决定是否提交你的代码。所以在这里,你可以这样:

$('#signupForm').submit(function(e) {
    var regname = $('#regname'); 
    var regemail = $('#regemail'); 
    var regpass = $('#regpass'); 
    var register_result = $('#register_result'); 
    register_result.html('Loading..'); 
    if(regname.val() == ''){ 
        regname.focus();
        register_result.html('<span class="errorss"> * Full name can not be blank</span>');
        return false;
    } else if ($.trim(regemail.val()).length == 0) {
        regemail.focus(); 
        register_result.html('<span class="errorss">* Email address can not be blank</span>');
        return false;
    } else if(regpass.val() == ''){ 
        regpass.focus();
        register_result.html('<span class="errorss">* Password can not be blank</span>');
        return false;
    }

    emailCheck().done(function(r){
        if(r){
            $('#regemail').focus(); 
            $('#register_result').html('<span class="errorss"> This email address is already existed. Please choose another one </span>');
            //Reseting to submit bind to not call function again
            $('#signupForm').submit(function(){});
            $('#signupForm').submit();
        }
    }).fail(function(r){
        // Do something if fail.
    });

    return false

});

这只是针对您的问题的解决方法。要获得更优雅的解决方案,您应该再次检查您提到的链接:How to return the response from an asynchronous call?。特别是,在答案中,改善不良代码

部分

你应该做的另一个修复,你应该在你的回调函数中使用相同的选择器再次选择你的'span'。所以,这样做:

$('#emailcheck').html('<span class="errorss"> This email is existed.</span>');

代替

emailcheck.html('<span class="errorss"> This email is existed.</span>');