如何在 PHP 用户更改密码表单中实现 AJAX？

Question

我有一个小的密码重置表单，一旦用户成功登录，用户就可以在其用户帐户页面上访问该表单。我想实现 JQUERY AJAX 以便页面不会刷新，但我遇到了错误，现在用户密码是当用户提交表单时不会更改。

HTML

<section id = "changepassword" class = "text-center">



  <div class = "container mt-4">

  <h1>Change Password</h1><hr />

  <form method = "POST" id = "change_password">



   <div class = "form-group mt-4">

     <label for = "currentPasswordField">Current Password</label>

     <input type = "password" name = "current_Password" class = "form-control mt-2" id = "currentPasswordField" placeholder = "Current Password">

   </div>



    <div class = "form-group mt-4">

      <label for = "newPasswordField">New Password</label>

      <input type = "password" name = "new_Password" class = "form-control mt-2" id = "newPasswordField" placeholder = "New Password">

     </div>



    <div class = "form-group mt-4">

      <label for = "confirmNewPassword">Confirm New Password</label>

      <input type = "password" name = "confirm_Password" class = "form-control mt-2" id = "currentPasswordField" placeholder = "Confirm New Password">

     </div>

     <button type="submit" name="changePasswordBtn" class="mt-4 btn btn-primary">Change Password</button>

   </form>

  </div>

Javascript

<script type="text/javascript">

    $(document).ready(function() {

        $("#change_password").submit(function(e) {

            e.preventDefault();

            $.ajax({

                type : "POST",

                url : "changepwfunc.php",

                data : $("#change_password"),

                beforeSend : function() {

                    toastr.info("Please wait. Your request will be processed shortly.");

                },

                success : function(response){

                  if (response.status) {

                    toastr.success(response.message);

                    $("#change_password")[0].reset();

                  }else{

                   toastr.error(response.message);

                   $("#change_password")[0].reset();

                  }

                }

              });

           });

         });

</script>

PHP

session_start(); 
$userEmail = $_SESSION['email']; if(isset($_POST['changePasswordBtn'])){ 
// get entered variables 
$oldPassword = $_POST['currentPasswordField']; 
$newPassword = $_POST['newPasswordField']; 
$confPassword = $_POST['confirmNewPasswordField'];



// hash password $hashPassword = password_hash($newPassword, PASSWORD_BCRYPT, array('cost'=>12)); 

// Run initial query check 
$chg_pwd = $conn -> query("SELECT * FROM `users` where `email` = '$userEmail'"); $chg_pwd1=mysqli_fetch_array($chg_pwd); $data_pwd=$chg_pwd1['password']; $pwVerify = password_verify($oldPassword, $data_pwd);

$pwAlertNeg = "Your old password was incorrect.";

$pwAlertPos = "Your password has been updated successfully.";

$pwAlertNeg2 = "Your new passwords do not match";



if($pwVerify == true){

    if($newPassword==$confPassword){

        $update_pwd = $conn -> query("UPDATE `users` SET password='$hashPassword' WHERE email = '$userEmail'");

        $response = array('status' => true, 'message' => $pwAlertPos);        

    }else{

        $response = array('status' => false, 'message' => $pwAlertNeg2);  

    }

}

else

{

    $response = array('status' => false, 'message' => $pwAlertNeg);

}

此代码现在无法按主要目的运行，更改密码功能不起作用，很可能是我编写的用于传递表单数据的 javascript 代码的结果，如果我不得不猜测的话，如在我添加之前，密码已成功更改。

Answer 1

注意：-您需要做的是首先根据您在当前密码中输入的电子邮件从数据库中获取记录，其中只有电子邮件匹配（假设它是唯一键），然后进行比较如果同时包含数据库密码和用户输入的密码，则使用用户输入的密码输入的密码匹配，然后只有密码将通过 sql 更新查询更新为新密码。

HTML 部分：-

<section id = "changepassword" class = "text-center">
  <div class = "container mt-4">
  <h1>Change Password</h1><hr />
  <form method="post" name="password-form" id="form-password">
   <div class = "form-group mt-4">
     <label >Current Password</label>
     <input type = "password" name = "current_Password" class = "form-control mt-2" id = "oldpassword" placeholder = "Old Password">
   </div>
    <div class = "form-group mt-4">
      <label for = "newPasswordField">New Password</label>
      <input type="password" name="password" id="password" value="" 
 placeholder = "New Password">
     </div>
    <div class = "form-group mt-4">
      <label for = "confirmNewPassword">Confirm New Password</label>
      <input type="password" name="password-check" id="password-check" value="" placeholder = "Confirm New Password">
     </div>
<input type="submit" value="Submit" id="passsubmit" " class="mt-4 btn btn-primary">
   </form>
  </div>

JQuery 部分：-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript">
    
        $(document).ready(function() {
           $("#passsubmit").click(function(){
    event.preventDefault();
            $(".error").hide();
            var hasError = false;
            var newpass = $("#password").val();
             var oldpassword= $("#oldpassword").val();    
            var checkVal = $("#password-check").val();
            if (newpass == '') {
                $("#password").after('<span class="error">Please enter a password.</span>');
                hasError = true;
            } else if (checkVal == '') {
                $("#password-check").after('<span class="error">Please re-enter your password.</span>');
                hasError = true;
            } else if (newpass != checkVal ) {
                $("#password-check").after('<span class="error">Passwords do not match.</span>');
                hasError = true;
            }
    
            if(hasError == true) {return false;}
    
            if(hasError == false) {
                    $.ajax({
                    type: "POST",
                    url: "changepassword.php",
                    data: {oldpassword:oldpassword,newpass:newpass},
                    success: function(){
                      }
                    });
            };
        });
    });
    });
    
    </script>

PHP 部分更新查询：-