通过AJAX从PHP获取验证错误

现在，我已经创建了一个简单的联系人表单

目前，如果我想用PHP验证任何东西，我需要重新加载页面（我已经有了客户端验证）

但是，我希望在不重新加载页面的情况下执行此操作。因为我没有使用ajax的经验，所以我对在internet上看到的所有示例感到困惑

如果可能的话，我还想使用jQuery

$.post（）

，但我认为ajax也是这样做的

以下是简单的标记：

<form id="myForm" method="POST" action="">

    <input name="name" class="<? if($errorsArray['email']) {echo "error";} ?>" type="email" required><br>
    <input name="comment" class="<? if($errorsArray['name']) {echo "error";} ?> " type="text" required><br>

    <input name="submit" type="submit" value="Send">

</form>

我在class属性中回显“error”以表示错误。但是，这需要我重新加载页面，我不想这样做。（如果存在错误，我也会以相同的方式保留已提交的值）

如何使用ajax为每个字段（有错误）添加类：

error

---

如果您还需要更多的代码，我非常乐意提供，只需给我一个注释。

基本要点是，您需要使用jQuery发送post请求（并覆盖表单的默认提交功能），这将重新加载页面。该post请求被发送到php页面，该页面将执行验证并将结果发送回jQuery。然后使用jQuery根据php脚本返回的内容在相关输入元素上设置

class=error

。

首先，我从服务器端开始

因为您希望通过XHR请求提交表单，所以服务器应该将数据作为JSON对象返回

使用JSON，您可以拥有包含

结果

和可能的

错误

的结构化数据

因此，在表单将向其发送请求的PHP文件中：

#检查验证是否成功
如果（$validated==true）{
#做你的逻辑。。。
#将发布的数据插入数据库…等。
#显示成功消息
$response=array(
'error'=>null，
'结果'=>数组(
'消息'=>“已成功发送消息…”
)
);        
}否则{
#显示错误消息
$response=array(
#在本例中，get_readable_errors（）方法返回一个数组
#其中包含无效字段的“名称”作为键
#并将验证错误作为值
#例如。
#
#“错误”=数组(
#“名称”=>“名称字段”的验证错误，
#'注释'=>'注释字段的验证错误'
# ),
'error'=>$validator->get\u readable\u errors（），
“结果”=>null
);
}
#将输出作为JSON发送
echo json_编码（$response）；

然后，在客户端，您需要防止表单的默认提交

使用jQuery，您可以使用方法将处理程序绑定到submit事件：

var $form = $('#myForm'),

_updateView = function(data, $form) {
    data.error === null             &&
    _showResult(data.result, $form) ||
    _showError(data.error, $form);
},

// This function triggers if the ouput data has no error
_showResult = function(result, $form) {

    // Clear all error messages
    // Remove the old success message
    // Insert the Success message
    // Reset the form
    $form[0].reset();

    return true;
},

// This function triggers if the output is an error
_showError = function(error, $form) {
    // Clear old success message
    // Clear all old errors

    // Show the error message of each field
    $.each(error, function(field, err) {
        $('input[name="'+ field +'"]')
            .addClass('error')
            // Insert the error message of the relevant field (optional)
            .after('<small class="error">'+ err +'</small>');
    });
};

希望这有帮助

更新 我刚刚注意到你的评论说：

我已经在客户端验证中这样做了。我想用php 如果客户端失败（禁用javascript），也要进行验证

首先，永远不要依赖客户端验证。客户端可以轻松禁用JavaScript并发布有害数据

其次，由于只有启用了JavaScript才能使用AJAX，因此如果需要在非AJAX请求上以HTML格式推送PHP输出，可以将

AJAX=true

键/值对传递给服务器，并将输出作为JSON返回给视图

在

$.ajax（）方法中：

data : $form.serialize() + '&ajax=true',

然后在服务器端检查
$\u POST['ajax']
的存在和值，并确定是否将输出作为JSON发送

您还可以通过在
$\u服务器
中使用

检查

HTTP\u X\u REQUESTED\u来确定XHR请求，如下所示：

函数是\u xhr\u request（）
{
返回（$_服务器['HTTP_X_请求的_，带']=='XMLHttpRequest'）；
}
您是否尝试过按照基本指南了解ajax的工作原理？@zerkms我已经了解了w3学校提供的内容，但它并没有真正告诉我有关提交表单的任何信息。@EliteGamer您可以在验证失败时通过JavaScript在
输入
上设置
错误
类。如果您使用的是jQuery，那么可以使用
addClass（）
方法。@HashemQolami我已经通过客户端验证完成了这项工作。我也想使用php验证，如果客户端失败（禁用javascript），我不是说使用客户端验证。让我澄清一下，当您通过XHR向服务器发送POST请求（查看
$.ajax（）
方法）时，服务器应该返回一个JSON，其中包含
错误和/或
结果
键/值。如果
错误
为真，您应该将所需的类名添加到元素中。我是否可以只回显JSON编码的数组（errorArray），然后解析其中的每个字段？这样做似乎需要很多信息。将输出作为JSON发送是处理AJAX请求最广泛使用的解决方案，因为解析JSON是一个非常简单的解决方案（
JSON.parse（）
）。如果以HTML形式发送输出，则需要获取内容（值、innerHTML等）以将其附加到当前页面中。您还可以将数据格式化为
XML
，并通过a.：O解析输出。好吧，这就更有意义了。非常感谢你@EliteGamer我刚刚更新了答案以满足您的需要；）
data : $form.serialize() + '&ajax=true',