Question

这是我的代码的工作方式：

我的Ajax代码运行正常，我收到错误响应，并且收到正确答案后，该表单会向我显示消息，隐藏该表单，然后重定向到同一站点的另一页面。

我想在代码Ajax中实现的目标

我想要的是能够在与您的错误消息相对应的每个输入字段中显示个性化消息，而不是在某个部分中全局显示它，我的想法是在每个字段中显示消息（如果只有PHP代码）会很简单，但是我正在使用Ajax。

如何在每个输入中显示消息？

我的代码Ajax是：

$(function() {
    var frm = $('#resetform');
    frm.submit(function(e){
        e.preventDefault();
        var formData = frm.serialize();
        formData += '&' + $('#submit_btn').attr('name') + '=' + $('#submit_btn').attr('value');
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: formData,
        })
        .done(function(data) {
            let res = JSON.parse(data);
            if(res.status){
                $('#message').fadeIn();
                $('#message').html(res.message).delay(3000).fadeOut(3000);
                $(frm).hide();
        setTimeout(function(){
            location.href = 'index.php';
        },2000);
      } else {
        $('#message').fadeIn();
        $('#message').html(res.message).delay(3000).fadeOut(3000);
      }
        })
        .fail(function() {
            $('#message').fadeIn();
            $('#message').html(textStatus).delay(2000).fadeOut(2000);
        })
    });
});

我的代码PHP changepass.php

if (isset($_POST['password_change'])) {
    $user = $_POST['username'];
    $old_password = $_POST['old_password'];
    $new_password = $_POST['new_password'];
    $con_password = $_POST['con_newpassword'];

    if($con_password !== $new_password){
        echo json_encode(['status'=> false, 'message'=>"Passwords do not match!"]);
        exit;
    }

    $stmtUsers = $con->prepare("SELECT * FROM users where username=? limit 1");
    $stmtUsers->bind_param("s", $username);
    $stmtUsers->fetch();
    $stmtUsers->close();

    if (!password_verify($old_password, $result['password'])) {
        echo json_encode(['status'=> false, 'message'=>"The password is not valid!"]);
        exit;
    }

    $hash = password_hash($new_password, CRYPT_BLOWFISH);

    $stmtUpdate = $con->prepare("UPDATE `users` SET `password` = ? WHERE `username` = ?");
    $stmtUpdate->bind_param("ss", $hash, $username);
    if($stmtUpdate->execute()){
        echo json_encode(['status'=> true, 'message'=>"Password changed successfully!"]);
    } else{
         echo json_encode(['status'=> false, 'message'=>"The password could not be updated!"]);
    }

我的表单：

<form name="resetform" action="changepass.php" id="resetform" class="passform" method="post" role="form">
    <h3>Change Your Password</h3>
    <br />
    <label>Enter Old Password</label>
    <input type="password" class="form-control" name="old_password" id="old_password">
    <label>Enter New Password</label>
    <input type="password" class="form-control" name="new_password" id="new_password">
    <label>Confirm New Password</label>
    <input type="password" class="form-control"  name="con_newpassword"  id="con_newpassword" />
    <br>
    <input type="submit" class="btn btn-warning" name="password_change" id="submit_btn" value="Change Password" />
</form>

Answer 1

（基于当前代码）最简单的方法之一是返回输入元素标识符（例如name）和错误消息。例如，在服务器端（php）：

echo json_encode([
    'status'=> false,
    'message'=> [
        "con_newpassword" => "Passwords do not match!"
    ]
]);

然后在客户端（js）：

let res = JSON.parse(data);
if(res.status){
    // do something
} else {
    for (let name in res.message) {
        // adjust this element according to your styling need
        let msg = '<span class="error">' + res.message[name] + '</span>';
        $(msg).insertAfter($('[name=' + name + ']', '#resetform'));
    }
}

最后，您可能希望在某些时候（例如重新提交）删除所有错误消息，例如：

frm.submit(function(e){
    $('.error', '#resetform').remove();
    // some other code
}

如何在每个相应的输入中显示ajax发出的个性化消息？

1 个答案: