Ajax返回false表单

时间:2012-08-24 17:27:40

标签: php javascript ajax forms

您好我想在用户注册我的网站时检查我的数据库,以确保他们选择的用户名不存在,如果确实让他们知道。我的代码不起作用,虽然ajax中的返回似乎不会返回到我的表单,无论我做什么,表单始终提交。为什么会这样?感谢您的帮助

HTML

<form name="signup" action="Test1.php" onsubmit="return checkUser();" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

的Javascript

<script type="text/javascript" src="jquery-1.7.1.min.js"/></script>
<script type="text/javascript">
    function checkUser(){
        var userV = document.signup.user.value;
        $.ajax({
            url: "Test.php",
            type: "POST",
            data: {user:userV},
            success: function (response) {
                if(response=="0"){
                    //Username already exists notify user
                    return false;
                }else{
                    return true;
                }
            }
        });
    }
</script>

test.php的

<?PHP
    $user = $_POST['user'];
    if($user=="test"){
        die("0");
    }else{
        die("1")
    }
?>

Test1.php

<?PHP
    echo "Form submitted";
?>

2 个答案:

答案 0 :(得分:3)

您将return值放在ajax调用的success回调中,其执行被延迟直到服务器回答。

onsubmit="return checkUser();"期望true函数中的falsecheckUser()值:

function checkUser(){

   if( stuff )
      return true;
   else
      return false;

}

无论如何,这是一个整体糟糕的方法,因为它依赖于侵入性的javascript。更好的解决方案是将所有客户端逻辑移出标记:

<强> HTML

<form name="signup" action="Test1.php" method="get">
    <label for="_user">Username:</label><input type="text" name="user" id="_user"/>
   <input type="submit" value="Submit" />
</form>

<强> JS

<script>
// wrapping the code in a $(function(){ ... }); call delays its execution till document is loaded
$(function(){

$('form[name="signup"]').on('submit', function(event){

    // this prevents browser from actually following form url
    event.preventDefault();

    // a reference to the form to get used inside ajax callback
    var form = this;

    $.ajax({
         url: $(form).attr('action'),
         type: "POST",
         data: {user:$(form.user).val()},
         success: function (response) {
             if(response=="0"){

                alert('User exists!');

             }else{

                alert('User does not exist!');

             }
         }
     });

});

});
</script>

警报对用户来说是一个正确的信息,或更复杂的验证 - 这只是为了举例。

答案 1 :(得分:1)

你在回调中返回false,那也是“迟到”,因为它将在请求完成时被调用。考虑为您的函数添加明确的e.preventDefault()return false。目前,它将返回undefined,因为您在“内部”函数中定义了return语句。

当然,您需要手动导航到目标页面。

或者将async来电的$.ajax() parameter明确地设置为false