Question

我正在创建一个注册表单，我设置了这样一旦用户点击提交按钮，它就会将所有表单信息发送到PHP文件，然后验证所有内容。

我想要做的是，如果多个输入有错误，我如何从PHP文件发回消息并将其显示在相应的输入旁边？

这是我到目前为止所拥有的：

JavaScript的：

$(document).ready(function() {
  $(document).on("submit", "form", function(event) {
    event.preventDefault();
    $.ajax({
      url: 'assets/php/verify.php',
      type: "POST",
      data: $(this).serialize(),
      success: function(data) {
        alert(data);
      }
    });
  });
});

PHP：

<?php 
  $username = $_POST["username"];
  $email = $_POST["email"];
  $password = $_POST["password"];
  $errors = array();

  $errors["username"] = "Username not available.";
  $errors["password"] = "Password invalid.";

  echo json_encode($errors);
?>

如何解码$ errors数组，然后将值消息放在每个输入旁边（例如）：

<input name="username" type="text"><div class="message">Username not available.</div>
<input name="password" type="text"><div class="message">Password invalid.</div>

Answer 1

你可以这样做：

// js
$.ajax({
    url: 'assets/php/verify.php',
    type: "POST",
    data: $(this).serialize(),
}).then(function(data) {
    if (data['errors']) {
         $.each(data['errors'], function(key, val) {
             $('#error-' + key).text(val);
         });
    }
});

// html
<span id="error-username"></span>

但是，这不会考虑HTTP错误代码，它应随表单一起提供。例如，如果用户无法注册，因为服务器不会处理信息（即信息无效），则应提供带有JSON的HTTP 422 unprocessible entity状态代码。如果一切正常，您应该只提供HTTP 200代码。查看主题的Wikipedia article。

要设置错误代码，请使用php中的http_response_code函数。如果您确实更新了程序以提供此错误代码，那么您应该更新您的函数以反映它：

$.ajax({
    url: 'assets/php/verify.php',
    type: "POST",
    data: $(this).serialize(),
}).then(function(data) {
    console.log('Success!');
}).fail(function(jqXHR) {
         $.each(jqXHR.responseText['errors'], function(key, val) {
         $('#error-' + key).text(val);
     });
});

Answer 2

通过使用dataType: "json"，您告诉jQuery您希望响应中的对象jQuery然后将结果解析为您可以data.property_key访问的对象：

jQuery的：

$.ajax({
    type: "POST",
    url: 'assets/php/verify.php',
    data: $(this).serialize(),
    success: function(data) {
        if(data.status=="success"){
            $("#message").html('Success, do something');
        }else{
            $("#message_user").html(data.username);
            $("#message_pass").html(data.password);
            $("#message_email").html(data.email);
        }

    },
    dataType: "json"
});

然后将你的div改为span; p

<input name="username" type="text"><span id="message_user"></span>
<input name="password" type="text"><span id="message_pass"></span>
<input name="email" type="text"><span id="message_email"></span>

<span id="message"></span>

然后你的PHP部分需要更多验证来检查其他可能的错误。然后不要忘记json标题。

<?php 
if($_SERVER['REQUEST_METHOD'] == 'POST'){
    $errors = array();
    //username
    if(!empty($_POST["username"])){
        $username = $_POST["username"];
        //do locic to check username ect
        if(username already found in db){
            $errors["username"] = "Username not available.";
        }
    }else{
        $errors["username"] = "Username required.";
    }

    //email, should also check its a real email
    if(!empty($_POST["email"])){
        $email = $_POST["email"];
    }else{
        $errors["email"] = "Email required.";
    }

    //password
    if(!empty($_POST["password"])){
        $password = $_POST["password"];
    }else{
        $errors["password"] = "Password required.";
    }

    //do if $errors empty
    if(empty($errors)){
        //do somthing all was good
        $responce = array('status'=>'success');

    }else{
        //error
        $responce = $errors;
    }
    //send responce
    header('Content-Type:application/json;');
    echo json_encode($responce);

}
?>

Answer 3

做什么说Joshua Smock，不要忘记给ajax添加属性;

$.ajax({
    url: 'assets/php/verify.php',
    type: "POST",
    dataType: "json", // look here
    data: $(this).serialize(),
}). // continue

Answer 4

据我所知，php无法立即将错误消息发回网页。您可能需要考虑使用Ajax。

从PHP文件发回消息

4 个答案: