javascript - 根据脚本的响应更新 div

Question

这里没有什么能完全满足我的需求，我确信这与大多数事情相比很容易，但我真的对 jQuery 没有知识或理解，所以我在这里有点困惑。

我有一个密码更改表单(目前可以更改密码)，但它不能显示发生了任何事情。因此，现在当我填写密码并点击提交时，表单将提交到changePassword.php 脚本并正确处理，但我没有得到任何可见的指示。

我希望清除密码表单，并在按钮下方的 div 中填充我的 $response 消息之一。

main.php

<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 id="response"></div>

main.php 中的 jQuery:

$(document).ready(function(){
    $("#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(data){ // this happens after we get results
                $("#results").show();
                $("#results").append(data);
            }
        });
    });
});

最后，脚本changePassword.php

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

if($password === '' || $password === FALSE){
  $response = "Your password cannot be blank!";
} else {
  if(strlen($password)<7){
    $response = "Your password is too short!";
  } else {
    if ($password <> $password2) { 
      $response = "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() );
    echo $response;
    }
    else { mysqli_error($con); }
  };
};

Answer 1

我已更新您的编码。根据 @jay-blanchard 的建议，我使用 PDO 更新了 changePassword.php 代码。

并且还实现了验证规则并将它们存储在数组中。在之前的代码中，您使用了 if else if。因此，如果密码有 3 个错误，则意味着它不会一次显示。您需要按提交按钮 3 次才能将这些错误一一列出。现在，我更新了这些错误，将这些错误存储到数组中，并在最后阶段将它们编码为 json。检查下面的代码。如果您发现任何问题，请回复我。因为，我还没有测试过代码。希望它能够成功执行。

changePassword.php

<?php

// Database configuration
define('DB_HOST', 'localhost');
define('DB_USER', 'username');
define('DB_PASS', 'password');
define('DB_NAME', 'database');

// Initializing error array
$response['error'] = array();

try {
    $db = new PDO('mysql:host=' . DB_HOST .';dbname=' . DB_NAME . ';charset=utf8mb4', DB_USER, DB_PASS);
    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $db->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
} catch (Exception $e) {
    $response['error'][] = "Error in DB Connection";
}

// Store post and session values to variable.
$currentPassword = $_POST['currentPassword']; 
$password = $_POST['newPassword'];
$password2 = $_POST['confirmPassword'];
$username = $_SESSION['username'];

// Validating Password
if($password === '' || $password === FALSE ){
    $response['error'][] = "Your Password cannot be blank";
}
if(strlen($password)<7){
    $response['error'][] = "Your Password is too short!";
}
if($password <> $password2){
    $response['error'][] = "Your Passwords do not match";
}

// If validation password update the password for the user.
if(empty($response['error'])){
    $stmt = $db->prepare('UPDATE Staff SET password=? WHERE username=?'); // Prepare the query
    $stmt->execute(array(password_hash($password, PASSWORD_DEFAULT), $username)); // Bind the parameters to the query
    $affectedRows = $stmt->rowCount(); // Getting affected rows count
    if($affectedRows != 1){
        $response['error'][] = "No User is related to the Username";
    }
}

// printing response.
if(!empty($response['error'])){
    echo json_encode($response);
}else{
    echo json_encode(array("success"=>true));
}

我将响应格式化为 json。因此，我将 ajax 函数 dataType 更新为 json。检查下面的代码。

main.php

<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 id="response" style="display:none"></div>

<script>
$(document).ready(function(){
    $("#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: "json",
            success: function(data){ // this happens after we get results
                $("#response").show();
                $("#response").html("");
                // If there is no error the response will be {"success":true}
                // If there is any error means the response will be {"error":["1":"error",..]}
                if(data.success){
                    $("#response").html("Successfully Updated the Password");
                }else{
                    $.each(data.error, function(index, val){
                        $("#response").append(val+"<br/>");
                    });
                }
            }
        });
    });
});
</script>

希望对您有帮助。享受吧。