额外功能

加载指示器
表单验证
加载按钮
闪讯
使用示例

使用 AJAX 框架时，您可以选择指定extras 包含附加样式表和 JavaScript 文件的后缀。在前端 CMS 页面中处理 AJAX 请求时，这些功能非常有用。

{% framework extras %}

加载指示器

您应该注意到的第一个功能是加载指示器，当 AJAX 请求运行时，它会显示在页面顶部。该指标挂钩到全球事件由 AJAX 框架使用。

当 AJAX 请求启动时ajaxPromise 事件被触发，显示指示器并将鼠标光标置于加载状态。这ajaxFail 和ajaxDone 事件用于检测请求何时完成，指示器再次隐藏。

表单验证

您可以指定data-request-validate 表单上的属性以启用验证功能。

<form
    data-request="onSubmit"
    data-request-validate>
    <!-- ... -->
</form>

抛出验证错误

在服务器端 AJAX 处理程序中，您可以抛出一个验证异常使用ValidationException 使字段无效的类，其中第一个参数是一个数组。该数组应使用字段名称作为键，使用错误消息作为值。

function onSubmit()
{
    throw new ValidationException(['name' => 'You must give a name!']);
}

NOTE：你也可以传递一个实例验证服务作为异常的第一个参数。

显示错误信息

在表单内，您可以使用data-validate-error 容器元素上的属性。容器内的内容将设置为错误消息，元素将变为可见。

<div data-validate-error></div>

要显示多条错误消息，请包含一个带有data-message 属性。在此示例中，段落标签将被复制并设置为每条存在的消息的内容。

<div class="alert alert-danger" data-validate-error>
    <p data-message></p>
</div>

要在 AJAX 失效时添加自定义类，请挂接到ajaxInvalidField 和ajaxPromise JS 事件。

$(window).on('ajaxInvalidField', function(event, fieldElement, fieldName, errorMsg, isFirst) {
    $(fieldElement).closest('.form-group').addClass('has-error');
});

$(document).on('ajaxPromise', '[data-request]', function() {
    $(this).closest('form').find('.form-group.has-error').removeClass('has-error');
});

显示字段错误

或者，您可以通过定义一个使用data-validate-for 属性，将字段名称作为值传递。

<!-- Input field -->
<input name="phone" />

<!-- Validation message for the field -->
<div data-validate-for="phone"></div>

如果该元素留空，它将使用来自服务器的验证文本填充。否则你可以指定任何你喜欢的文本，它会被显示出来。

<div data-validate-for="phone">
    Oops.. phone number is invalid!
</div>

加载按钮

当任何元素包含data-attach-loading 属性，CSS类wn-loading 将在 AJAX 请求期间添加到其中。这个类会产生一个加载微调器 在按钮和锚元素上使用:after CSS 选择器。

<form data-request="onSubmit">
    <button data-attach-loading>
        Submit
    </button>
</form>

<a
    href="#"
    data-request="onDoSomething"
    data-attach-loading>
    Do something
</a>

闪讯

指定data-request-flash 表单上的属性，以便在成功的 AJAX 请求上启用 flash 消息。

<form
    data-request="onSuccess"
    data-request-flash>
    <!-- ... -->
</form>

结合使用Flash facade 在事件处理程序中，请求完成后将出现一条闪现消息。

function onSuccess()
{
    Flash::success('You did it!');
}

为了与基于 AJAX 的 flash 消息保持一致，您可以呈现一个标准快讯通过将此代码放置在您的页面或布局中来加载页面时。

{% flash %}
    <p
        data-control="flash-message"
        class="flash-message fade {{ type }}"
        data-interval="5">
        {{ message }}
    </p>
{% endflash %}

使用示例

下面是一个完整的表单验证示例。它调用了onDoSomething 触发加载提交按钮的事件处理程序，对表单字段执行验证，然后显示一条成功的快速消息。

<form
    data-request="onDoSomething"
    data-request-validate
    data-request-flash>

    <div>
        <input name="name" />
        <span data-validate-for="name"></span>
    </div>

    <div>
        <input name="email" />
        <span data-validate-for="email"></span>
    </div>

    <button data-attach-loading>
        Submit
    </button>

    <div class="alert alert-danger" data-validate-error>
        <p data-message></p>
    </div>

</form>

AJAX 事件处理程序查看客户端发送的 POST 数据并将一些规则应用于验证器。如果验证失败，一个ValidationException 被抛出，否则Flash::success 消息被返回。

function onDoSomething()
{
    $data = post();

    $rules = [
        'name' => 'required',
        'email' => 'required|email',
    ];

    $validation = Validator::make($data, $rules);

    if ($validation->fails()) {
        throw new ValidationException($validation);
    }

    Flash::success('Jobs done!');
}

额外功能

#加载指示器

#表单验证

#抛出验证错误

#显示错误信息

#显示字段错误

#加载按钮

#闪讯

#使用示例