Question

我正在尝试使用ajax提交密码更改，以便能够在更改后保留在同一个ui.tab页面上，并提供视觉反馈。如果我在表单中保留action =“change_password_do.php”，我可以更改密码，因此php文件有效。如果我把动作=“”放在表格中，我什么都没得到。显然我的ajax存在一个基本错误，但我无法找到它。有人可以指出我正确的方法吗？

<script type="text/javascript">
$(document).ready(function() {
    $('#new_password_submit').click(function() {
        $.ajax({
            type: "POST",
            url: "change_password_do.php",
            data: $("form.pw_todo").serialize()
        });
    });
});
</script>                       

<div id="tabs_6" class="tabs">
       <h2 class="tablecaption">Change your password</h2>

       <form id="change_pass" class="pw_todo" method="post" action="">

            <input class="formlogin" type="password" name="password1" placeholder="New Password" title="Type in your New Password"/><br />
            <input class="formlogin" type="password" name="password2" placeholder="Re-enter New Password" title="Re-type your New Password"/><br />
            <input type="submit" id="new_password_submit" value="Submit" class="button"/>

       </form>  
</div>

Answer 1

您需要通过单击处理程序返回false来取消按钮的默认操作：

$('#new_password_submit').click(function() {
    $.ajax({
        type: "POST",
        url: "change_password_do.php",
        data: $("form.pw_todo").serialize()
    });
    return false; // <-- That's very important
});

作为替代方案，您可以取消默认操作：

<script type="text/javascript">
$(document).ready(function(evt) {
    $('#new_password_submit').click(function() {
        evt.preventDefault(); // <-- That's very important

        $.ajax({
            type: "POST",
            url: "change_password_do.php",
            data: $("form.pw_todo").serialize()
        });
    });
});
</script>

由于new_password_submit是提交按钮，如果您在单击按钮时未取消单击处理程序中的默认操作，则表单将被提交，浏览器将重定向远离页面，不会留出时间你要执行的AJAX请求。

这就是说我会建议您订阅表单的.submit事件而不是提交按钮的.click事件。这样可以保证AJAX请求始终执行。请记住，表单可以通过其他方式提交，而不是单击提交按钮。例如，用户可以在某个输入字段内按 Enter 键提交表单。如果他以这种方式提交表单，那么您的AJAX请求将永远不会执行。

所以，这是我推荐的解决方案：

$('#change_pass').submit(function(evt) {
    evt.preventDefault(); // <-- That's very important

    $.ajax({
        type: this.method,
        url: this.action,
        data: $(this).serialize()
    });
});

然后确保在表单上设置了action属性：

<form id="change_pass" class="pw_todo" method="post" action="change_password_do.php">

现在javascript所做的一切都是不引人注目的AJAX化表单的提交。如果用户已禁用javascript，则您的代码仍然有效。

Answer 2

我认为您不需要使用任何表单或提交按钮，因为您已通过AJAX传递您的值，将值直接传递给{的数据属性{1}}并继续你的AJAX方法。

$.ajax();

注意：为方便起见，我刚添加了ID <script type="text/javascript"> $(document).ready(function() { $('#new_password_submit').click(function(){ $.ajax({ type: "POST", url: "change_password_do.php", data: {'password1': $('#password1').val(), 'password2': $('#password2').val()} }); }); }); </script> <div id="tabs_6" class="tabs"> <h2 class="tablecaption">Change your password</h2> <input class="formlogin" type="password" name="password1" placeholder="New Password" title="Type in your New Password" id="password1"/><br /> <input class="formlogin" type="password" name="password2" placeholder="Re-enter New Password" title="Re-type your New Password" id="password2"/><br /> <input type="button" id="new_password_submit" value="Submit" class="button"/> </div>和password1

Answer 3

您必须取消提交事件，否则在ajax调用之前，表单仍会正常提交。

$('#new_password_submit').click(function(e){
        e.preventDefault();
        $.ajax({
            ....

接下来你缺少一个来自你的ajax调用的成功函数，所以如果它有效，你至少不会在视觉上注意到它。

最后，查看jQuery form plugin，它完全符合您的要求。没什么好看的，但是如果你需要很多它很有用

Answer 4

不要绑定按钮的click事件，更好地绑定表单的submit事件。

<script type="text/javascript">

$(function() {
    $('#change_pass').submit(function(e) {

        // this will prevent default form behaviour
        e.preventDefault()

        $.ajax({
            type: "POST",
            url: $(this).attr('action'),
            data: $(this).serialize(),
            success: function(data){

                // consider displaying some message on success

            }
        });
    });
});

</script>

<form id="change_pass" class="pw_todo" method="post" action="change_password_do.php">

...

</form>

ajax表单提交，我哪里错了？

4 个答案: