AJAX额外功能

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

  1. {% framework extras %}

进度条

T您应注意的第一个功能是在运行AJAX请求时显示在页面顶部的加载指示器。 该指标挂钩到AJAX框架使用的global events。

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

表单校验

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

  1. <form
  2.     data-request="onSubmit"
  3.     data-request-validate>
  4.     <!-- ... -->
  5. </form>

抛出一个校验错误

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

  1. function onSubmit()
  2. {
  3.     throw new ValidationException(['name' => 'Name 字段不能为空~']);
  4. }

注意: 您还可以传递validation service的实例作为异常的第一个参数。

显示错误信息

在表单内部，您可以使用容器元素上的data-validate-error属性显示第一条错误消息。 容器内的内容将设置为错误消息，并且元素将可见。

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

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

  1. <div class="alert alert-danger" data-validate-error>
  2.     <p data-message></p>
  3. </div>

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

  1. $(window).on('ajaxInvalidField', function(event, fieldElement, fieldName, errorMsg, isFirst) {
  2.     $(fieldElement).closest('.form-group').addClass('has-error');
  3. });
  5. $(document).on('ajaxPromise', '[data-request]', function() {
  6.     $(this).closest('form').find('.form-group.has-error').removeClass('has-error');
  7. });

根据字段显示错误

或者，您可以通过定义使用data-validate-for属性的元素，将字段名称作为值来显示单个字段的验证消息。

  1. <!-- Input 字段 -->
  2. <input name="phone"/>
  4. <!-- 该字段的验证消息 -->
  5. <div data-validate-for="phone"></div>

如果元素保留为空，则将使用服务器中的验证文本填充该元素。 否则，您可以指定任何您喜欢的文本。

<div data-validate-for="phone">
    哎呀..电话号码无效！
</div>

加载按钮

当任何元素包含data-attach-loading属性时，在AJAX请求期间将向其添加CSS类oc-loading。 这个类将使用:after CSS选择器在按钮和锚元素上生成一个loading spinner。

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

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

Flash消息

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

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

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

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事件处理程序，触发加载提交按钮，对表单字段执行验证，然后显示成功的flash消息。

<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!');
}