POST上的AJAX更新

Question

I am trying to submit a change of password using AJAX and POST

Normally I can make it work fine, and if the change of password is complete and error free, it returns just a blank white page (This is without Ajax) I am trying to make the entire change of password, happen in a small div, which will then update with the response (either successfuly or not successful)

I have cut much of the code down so I can eliminate possible issues:

<div id="s-window">
    <form id="changepassword" action="changePassword.php" method="POST">
        <input type="password" name="currentPassword" placeholder="Current Password"/>
        <input type="password" name="newPassword" placeholder="New Password"/>
        <input type="password" name="confirmPassword" placeholder="Confirm Password"/>
        <input class="button" type="submit" value="Change Password" />
    </form>
</div>

changePassword.php:

<?php
    include('config.php');

    $currentPassword = ($_POST['currentPassword']); 
    $password = ($_POST['newPassword']);
    $password2 = ($_POST['confirmPassword']);
    $username = ($_SESSION['username']);

    if ($password <> $password2) 
    { 
        echo "Your passwords do not match.";
    }
    else if ($password === $password2) 
    {
        $hashed_password = password_hash($password, PASSWORD_DEFAULT);
        $sql = "UPDATE Staff SET password='$hashed_password' WHERE username='$username'";
        mysql_query($sql) or die( mysql_error());
    }
    else 
    { 
        mysqli_error($con); 
    }

    mysqli_close($con);
?>

I know the MySQL stuff is messy - it's something I am going to work on.

$(".button").click(function() {
    $.ajax({
        url: "changePassword.php",
        type: "POST",
        dataType: "html",
        success: function(html){ // this happens after we get results
            $("#s-window").append(html);
        }
    });
};

I have no experience with jQuery and my googling has not yielded any sufficiently similar results that I could build from.

Answer 1

The reason you get a blank white page is because the form element submit event is still firing after the button has been clicked. To prevent this, a better pattern to use is to hook your code to that submit event instead of the button click. Try this:

$("#changepassword").submit(function(e) {
    e.preventDefault(); // stop normal form submission
    $.ajax({
        url: "changePassword.php",
        type: "POST",
        data: $(this).serialize(), // you also need to send the form data
        dataType: "html",
        success: function(html) {
            $("#s-window").append(html);
        }
    });
});

Note that your PHP code only returns a string value when there is a mis-match in the provided passwords. You may wish to change that behaviour so that the end user knows when the action has been completed successfully too.