无需刷新的 AJAX 密码更改答案

【问题标题】：AJAX Password Change without Refresh无需刷新的 AJAX 密码更改
【发布时间】：2012-10-11 06:34:21
【问题描述】：

我正在尝试在我的网站中实现密码更改功能。我已经完成了所有密码更改脚本、验证等。但是现在我需要阻止页面进入脚本页面或刷新。当用户单击提交按钮时，除了显示successfully changed 或error 的消息外，我不希望进行任何更改。所以这是我的 html：

<form id="change_Pass" action="" method="post">
    Current Password<input type="password" id="change_password" name="change_password"><br>
    New Password<input type="password" id="new_password" name="new_password"><br>
    Verify Password<input type="password" id="verify_password" name="verify_password"><br>
    <input type="submit" value="Submit" id="change_pass_submit">
</form>

还有我的 jquery：

$('#change_pass_submit').click(function(){
    var $this = $(this);  
    $.ajax({
        data: $this.serialize(), // get the form data
        type: "POST", // GET or POST
        url: "/Private/change_password.php", // the file to call
        success: function() { // on success..
            //$('#success_div).html(response); // update the DIV
            alert("good");
        },
        error: function() { // on error..
            //$('#error_div).html(e); // update the DIV
            alert("bad");
        }
    });
    return false; //so it doesn't refresh when submitting the page
});

还有我的 php：

<?php
session_start();
require_once '../classes/Bcrypt.php';
ini_set('display_errors', 'On');
error_reporting(E_ALL | E_STRICT);
$usr = $_SESSION["username"];
$old_pwd = $_POST["change_password"];
$new_pwd = $_POST["new_password"];
$new_pwd = Bcrypt::hash($new_pwd);
try {
    $link = new PDO('mysql:host=*;dbname=*;charset=UTF-8','*','*');
    $query = "SELECT *
            FROM Conference
            WHERE Username = :un";

    $stmt = $link->prepare($query);

    $stmt->bindParam(':un', $usr);
    $stmt->execute();
    $row = $stmt->fetchAll();

    $hash = $row[0]["Password"];
    $is_correct = Bcrypt::check($old_pwd, $hash);
    if($is_correct) {
        $query = "UPDATE Conference
                SET `Password`=:new_pwd 
                WHERE Username = :usr";

        $stmt = $link->prepare($query);
        $stmt->bindParam(':new_pwd', $new_pwd);
        $stmt->bindParam(':usr', $usr);
        $stmt->execute();
        return true;
    } else return false;
} catch(PDOException $e) {
    print "Error!: " . $e->getMessage() . "<br/>";
    die();
}

但由于某种原因，当我点击提交按钮时，页面仍然转到change_password.php。我不知道为什么，我看了这么多教程，我的代码与他们的一致，但由于某种原因，我的代码不会停留在同一页面上。我哪里做错了？

【问题讨论】：

你应该检查一下js控制台看看有没有错误。尽管如此，您的代码已经有错误。您在函数内部传递变量，而不将它们作为参数放入成功和错误事件中。
@Richard 尝试在 firefox 上调试。如果您还没有，请使用 firebug 扩展。 Firebug 控制台上的 Net 选项卡显示请求。您可以确定您的问题是在js还是php中，然后纠正它。

标签： php html ajax jquery passwords

【解决方案1】：

将您的处理程序绑定到表单的submit 事件：

$(document).on('click', '#change_Pass', function() {
    var $this = $(this);  
    $.ajax({
        data: $this.serialize(), // get the form data
        type: "POST", // GET or POST
        url: "/Private/change_password.php", // the file to call
        success: function() { // on success..
            //$('#success_div).html(response); // update the DIV
            alert("good");
        },
        error: function() { // on error..
            //$('#error_div).html(e); // update the DIV
            alert("bad");
        }
    });

    return false; //so it doesn't refresh when submitting the page
});

【讨论】：

我试过了，但这不起作用。它不会更改密码，也不会停留在同一页面上。
是的，我刚刚检查过了，那里什么都没有。完全是空的。
您是否收到任何警报消息？此代码是否包含在 $(document).ready() 回调中？
我没有收到任何警报，我写的每个 jquery 总是在 .ready()
奇数。这个提交表单是否是动态生成的？

【解决方案2】：

不要使用$('#change_pass_submit').click(function()，而是使用$('#change_Pass').submit(function()。

.click 仅在实际单击提交按钮时才有效，即使用户按下回车键 .submit 也将起作用。

这应该可以解决您的错误，但它未经测试。

【讨论】：

【解决方案3】：

试着把 preventDefault();在 .submit 执行的函数的最后一行

        $(document).ready(function(){
            $( "#cambiar_pass_form" ).submit(function() {
                $.ajax({
                    ...
                    ...
                });
                event.preventDefault();
            });
        });

【讨论】：