Question

我有这个注册表格：

<div id="sign_up_field">
        <form id="sign_up_form" action="sys/account/sign_up.php" name="sign_up" method="post">
            <input class="account_form" type="text" name="name" placeholder="name (first and last name)" />
            <input class="account_form" type="email" name="email" placeholder="email address" />
            <input class="account_form" type="password" name="password" placeholder="password" />
            <input class="account_form" type="text" name="username" placeholder="@username" />
            <input class="account_button" id="sign_up_button" type="submit" value="Sign up" />
        </form>
    </div>

这是JS（JQuery）：

<script>
/*
* AJAX sign up
*/
$("#sign_up_button").click(function() {
    $.post( $("#sign_up_form").attr("action"),
            $("#sign_up_form :input").serializeArray(),
            function(info) {

                $('body').empty();
                $('body').html(info);

            });

    $("#sign_up_form").submit( function() {
        return false;
    });
});
</script>

我是AJAX的新手，这是我在Youtube教程中的第一次尝试，但当我点击提交按钮时，我只需要直接登录sign_up.php。 PHP代码有效，但JS似乎没有做它应该做的事情。我怎样才能让它发挥作用？

Answer 1

如果代码放在页面中的表单之前，它将找不到元素，因为它们尚不存在。将代码包装在ready()中将解决该问题

此外，在单击按钮之前，提交处理程序更好地绑定到表单。我个人会将ajax绑定到提交处理程序。然后，如果用户点击“输入”而不是点击按钮，它仍将通过ajax

试试这个：

$(function(){ /* ready handler*/   
    $("#sign_up_form").submit( function() {
        /* do ajax here */
        return false;
    });    
});

<强> jQuery.ready() docs

无法让这个AJAX适用于我的表单

1 个答案: