从脚本更新响应的div

Question

在这里，没有什么能满足我的需求，我确信这和大多数事情相比都很简单，但我真的不了解或不了解jQuery，所以我在这里有点晕头转向。

我有一个密码更改表单(目前可以更改密码)，但它不会显示发生了任何事情。所以现在，当我填写密码，点击submit，表单被提交到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>

​

jQuery in main.php：

$(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的建议，我用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>

希望它能帮到你。好好享受吧。

Answer 2

您的$response变量仅在嵌套的else语句中返回。将return $response移到if \ else语句的外部，因为您希望得到响应，而不管这些块中发生了什么。

而且，正在填充结果的div的id为response，但您正在尝试将其附加到一个id为results的div中。

变化

$("#results").show();
$("#results").append(data);

至

$("#response").show();
$("#response").append(data);

如果这样做不起作用，请尝试和console.log(data)，以确保您实际上是从服务器获得响应。使用浏览器开发工具查看日志。

希望这能有所帮助！