加载指示器

当 AJAX 框架向服务器发出请求时，最好显示一个加载指示器，因为页面可能不会立即更新。有几种方法和标准的加载指示器，以明确何时触发了 AJAX 请求以及该请求正在进行中。

进度条

AJAX 框架的一个显著特点是一个进度条，当 AJAX 请求运行时，它会显示在页面顶部。该进度条会监听 AJAX 请求，并在请求时间超过 300 毫秒时出现，请求完成后再次隐藏。

要禁用请求的进度条，请将 data-request-progress-bar 属性设置为 false。

html

<button
    data-request="onDoSomething"
    data-request-progress-bar="false">
    Do something
</button>

在 JavaScript 中，将 AJAX 请求的 progressBar 选项设置为 false。

javascript

oc.ajax('onSilentRequest', { progressBar: false });

若要全局禁用进度条，请将 visibility 样式设置为 hidden 使用 StyleSheet。

css

.oc-progress-bar {
    visibility: hidden;
}

您可以使用JavaScript显示进度条使用 oc.progressBar 对象和 show / hide 函数。

javascript

oc.progressBar.show();

oc.progressBar.hide();

加载按钮

提交表单时，用户可能会不小心点击两次按钮并导致重复提交，这个问题可以通过加载按钮来解决。在 AJAX 请求期间，具有 data-attach-loading 属性的按钮元素将被禁用，并添加一个 CSS 类 oc-attach-loader。这个类将使用 :after CSS 选择器在按钮和锚点元素上生成一个加载指示器。

html

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

当一个按钮存在于一个包含 oc-attach-loader 属性的表单中时，将显示加载指示器。

html

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

由于输入框不支持 :after CSS 选择器，因此会在它们后面插入一个新元素。该元素在 AJAX 请求完成后会被移除。这在使用 data-track-input 属性时很有用该属性会监测输入框的变化并提交 AJAX 请求。

html

<input name="username"
    data-request="onCheckUsername"
    data-track-input
    data-attach-loading />

你可以手动添加加载器到一个按钮使用 oc.attachLoader 对象和 show / hide 函数并将元素选择器或对象作为第一个参数传入。

javascript

oc.attachLoader.show('.my-element');

oc.attachLoader.hide('.my-element');

切换元素

您可以使用 data-request-loading 属性在 AJAX 请求期间使元素可见。该值是一个 CSS 选择器，它使用显示 block 和 none 属性来管理元素的可见性。

html

<button
    data-request="onPay"
    data-request-loading=".is-loading">
    Pay Now
</button>

<div style="display:none" class="is-loading">
    Processing Payment...
</div>

检测全局请求

你可以通过检查HTML元素上的 data-ajax-progress 属性来检测全局AJAX请求是否正在进行中。在样式表中表示如下。

css

html[data-ajax-progress] {
    /* Display loading indicators */
}

该属性也被添加到表单元素中。

css

form[data-ajax-progress] {
    /* The form is loading */
}

针对特定处理程序

在某些情况下，您可能希望针对特定的AJAX 处理程序事件显示加载指示器，data-ajax-progress 属性将包含最新的处理程序名称，这可用于定位特定的请求。

html

<form>
    <button data-request="onPay">Pay Now</button>
    <button data-request="onCancel">Cancel</button>

    <div class="is-payment-loading">
        Processing Payment...
    </div>
</form>

这可以通过样式表属性值选择器进行定位。

css

.is-payment-loading {
    display: none;
}

form[data-ajax-progress=onPay] .is-payment-loading {
    display: block;
}

使用 JavaScript

对于更复杂的场景，你可以接入 AJAX JavaScript API 利用 ajax:promise 和 ajax:always 事件。这些事件可以附加到文档、表单或目标元素上。

javascript

formElement.addEventListener('ajax:promise', function() {
    // A new request has started
});

formElement.addEventListener('ajax:always', function() {
    // A request has ended
});

以下示例将在请求运行时禁用表单内部的所有输入。

javascript

addEventListener('ajax:promise', function(event) {
    event.target.closest('form').querySelectorAll('input').forEach(function(el) {
        el.disabled = true;
    });
});

addEventListener('ajax:always', function() {
    event.target.closest('form').querySelectorAll('input').forEach(function(el) {
        el.disabled = false;
    });
});

加载指示器

进度条

要禁用请求的进度条，请将 data-request-progress-bar 属性设置为 false。

html

<button
    data-request="onDoSomething"
    data-request-progress-bar="false">
    Do something
</button>

在 JavaScript 中，将 AJAX 请求的 progressBar 选项设置为 false。

javascript

oc.ajax('onSilentRequest', { progressBar: false });

若要全局禁用进度条，请将 visibility 样式设置为 hidden 使用 StyleSheet。

css

.oc-progress-bar {
    visibility: hidden;
}

您可以使用JavaScript显示进度条使用 oc.progressBar 对象和 show / hide 函数。

javascript

oc.progressBar.show();

oc.progressBar.hide();

加载按钮

html

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

当一个按钮存在于一个包含 oc-attach-loader 属性的表单中时，将显示加载指示器。

html

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

html

<input name="username"
    data-request="onCheckUsername"
    data-track-input
    data-attach-loading />

你可以手动添加加载器到一个按钮使用 oc.attachLoader 对象和 show / hide 函数并将元素选择器或对象作为第一个参数传入。

javascript

oc.attachLoader.show('.my-element');

oc.attachLoader.hide('.my-element');

切换元素

您可以使用 data-request-loading 属性在 AJAX 请求期间使元素可见。该值是一个 CSS 选择器，它使用显示 block 和 none 属性来管理元素的可见性。

html

<button
    data-request="onPay"
    data-request-loading=".is-loading">
    Pay Now
</button>

<div style="display:none" class="is-loading">
    Processing Payment...
</div>

检测全局请求

你可以通过检查HTML元素上的 data-ajax-progress 属性来检测全局AJAX请求是否正在进行中。在样式表中表示如下。

css

html[data-ajax-progress] {
    /* Display loading indicators */
}

该属性也被添加到表单元素中。

css

form[data-ajax-progress] {
    /* The form is loading */
}

针对特定处理程序

在某些情况下，您可能希望针对特定的AJAX 处理程序事件显示加载指示器，data-ajax-progress 属性将包含最新的处理程序名称，这可用于定位特定的请求。

html

<form>
    <button data-request="onPay">Pay Now</button>
    <button data-request="onCancel">Cancel</button>

    <div class="is-payment-loading">
        Processing Payment...
    </div>
</form>

这可以通过样式表属性值选择器进行定位。

css

.is-payment-loading {
    display: none;
}

form[data-ajax-progress=onPay] .is-payment-loading {
    display: block;
}

使用 JavaScript

对于更复杂的场景，你可以接入 AJAX JavaScript API 利用 ajax:promise 和 ajax:always 事件。这些事件可以附加到文档、表单或目标元素上。

javascript

formElement.addEventListener('ajax:promise', function() {
    // A new request has started
});

formElement.addEventListener('ajax:always', function() {
    // A request has ended
});

以下示例将在请求运行时禁用表单内部的所有输入。

javascript

addEventListener('ajax:promise', function(event) {
    event.target.closest('form').querySelectorAll('input').forEach(function(el) {
        el.disabled = true;
    });
});

addEventListener('ajax:always', function() {
    event.target.closest('form').querySelectorAll('input').forEach(function(el) {
        el.disabled = false;
    });
});

文档导航

加载指示器

进度条

加载按钮

切换元素

检测全局请求

针对特定处理程序

使用 JavaScript

加载指示器

进度条

加载按钮

切换元素

检测全局请求

针对特定处理程序

使用 JavaScript