Question

截至目前，我已经创建了一个简单的联系表单。

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

但是，我想在不重新加载页面的情况下这样做。由于我没有使用ajax的经验，所以我在互联网上看到的所有例子都让我感到困惑。

如果可能，我还想使用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>

我的PHP：

$requiredFields = array('name', 'comment');
foreach ($requiredFields as $field) {
    $errorsArray[$field] = true;
}

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

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

如果您需要更多代码，我将非常乐意给您，只需给我一个评论。

Answer 1

首先，我从服务器端开始。

由于您想通过XHR请求提交表单，服务器应该将数据作为JSON对象返回。

使用JSON，您可以获得包含result和可能errors的结构化数据。

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

# Check whether the validation was successful
if ($validated === true) {
    # Do your logic...
    # Insert the posted data into database... etc.

    # show success message
    $response = array(
        'error'  => null,
        'result' => array(
            'message' => "Successfully message..."
        )
    );        
} else {
    # Show the error message
    $response = array(
        # In this case, get_readable_errors() method returns an array
        # which contains the 'name' of the invalid fields as key
        # and the validation error as value
        # e.g.
        #
        # 'error' = array(
        #     'name'    => 'Validation error for name field',
        #     'comment' => 'Validation error for comment field'
        # ),
        'error' => $validator->get_readable_errors(),
        'result' => null
    );
}

# send the output as JSON
echo json_encode($response);

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

使用jQuery，您可以使用.submit()方法将处理程序绑定到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>');
    });
};

AJAX调用，使用$.ajax()：

$form.submit(function(e) {
    /* Prevent the default submission */
    e.preventDefault();

    $.ajax({
        url      : 'PHP/file/URL',
        type     : 'POST',
        dataType : 'json',  /* <-- Parse the response as JSON object */
        data     : $form.serialize(),

        success: function(data) {
            // Update the view
            _updateView(data, $form);
        },

        error: function(jqXHR, textStatus, errorMessage) {
            console.log(errorMessage); // Optional
        }
    });
});

希望这有帮助。

更新

我刚刚注意到你的评论指出：

我已经通过客户端验证做到了这一点。我想用php 验证，如果客户端失败（禁用javascript）

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

其次，由于只有在启用JavaScript时才可以使用AJAX，如果需要在非AJAX请求上以HTML格式推送PHP输出，则可以将ajax=true键/值对传递给服务器，并将输出作为JSON返回到视图。

在$.ajax()方法中：

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

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

您还可以通过查看HTTP_X_REQUESTED_WITH中的$_SERVER来确定XHR请求，如下所示：

function is_xhr_request()
{
    return ($_SERVER['HTTP_X_REQUESTED_WITH'] === 'XMLHttpRequest');
}

Answer 2

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

通过AJAX从PHP获取验证错误

2 个答案:

更新