2

我正在尝试使用 ajax 提交密码更改，以便能够在更改后保持在同一个 ui.tab 页面上，并提供视觉反馈。如果我将 action="change_password_do.php" 留在表单中，我可以更改密码，因此 php 文件有效。如果我将 action="" 放入表单中，我将一无所获。显然我的 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>
4

4 回答 4

4

您需要通过单击处理程序返回 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 所做的就是不显眼地 AJAXifying 表单的提交。如果用户禁用了 javascript，您的代码仍然可以工作。

于 2012-12-29T17:33:17.083 回答
0

我认为您不需要使用任何表单或提交按钮，因为您已经通过 AJAX传递值，将值直接传递给数据属性$.ajax();并继续您的 AJAX 方法。

<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>

注意：我刚刚添加了 ID password1，password2为了您的方便

于 2012-12-29T17:33:40.453 回答
0

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

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

接下来，您的 ajax 调用中缺少一个成功函数，因此事件如果它有效，您至少不会在视觉上注意到它。

最后，查看jQuery 表单插件，它完全符合您的要求。没什么花哨的，但如果你需要它，它很有用

于 2012-12-29T17:34:24.097 回答
0

不要绑定按钮的点击事件，最好绑定表单的提交事件。

<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>
于 2012-12-29T17:38:40.370 回答