AJAX JavaScript API

• JavaScript API
• 使用示例
• 全局AJAX事件
• 使用示例

JavaScript API

JavaScript API比数据属性API更强大。 request方法可以与表单内部或表单元素上的任何元素一起使用。当该方法与表单内的元素一起使用时，它将被转发到表单。

request方法有一个必需的参数—AJAX处理程序名称。例：

<form onsubmit="$(this).request('onProcess'); return false;">
    ...

request方法的第二个参数是options对象。您可以使用与jQuery AJAX函数兼容的任何选项和方法。以下选项特定于October框架：

您还可以通过将新函数作为选项传递来覆盖某些请求逻辑。这些逻辑处理程序可用。

使用示例

在发送onDelete请求之前请求确认:

$('form').request('onDelete', {
    confirm: 'Are you sure?',
    redirect: '/dashboard'
})

请求onCalculate方法后，用result CSS类将渲染的calcresult部分注入到页面元素:

$('form').request('onCalculate', {
    update: {calcresult: '.result'}
})

请求onCalculate的时候传递额外的数据到后台:

$('form').request('onCalculate', {data: {value: 55}})

在请求onCalculate方法更新页面元素之前执行一些js方法:

$('form').request('onCalculate', {
    update: {calcresult: '.result'},
    beforeUpdate: function() { /* 在这里可以写一些js */ }
})

如果onCalculate请求成功后，可以编写一些自定义的js方法，以及调用默认的success方法

$('form').request('onCalculate', {success: function(data) {
    //...写在这...
    this.success(data);
}})

执行没有表单元素的请求:

$.request('onCalculate', {
    success: function() {
        console.log('Finished!');
    }
})

运行onCalculate处理程序，如果成功，在默认的success函数完成后运行一些自定义代码：

$('form').request('onCalculate', {success: function(data) {
    this.success(data).done(function() {
        //... do something after parent success() is finished ...
    });
}})

全局AJAX事件

AJAX框架在更新的元素，触发元素，窗体和窗口对象上触发多个事件。 无论使用哪种API(数据属性API或JavaScript API)，都会触发事件。

这些事件在触发元素上触发:

使用示例

当在元素上触发ajaxUpdate事件时执行JavaScript代码。

$('.calcresult').on('ajaxUpdate', function() {
    console.log('Updated!');
})

使用逻辑处理程序执行显示Flash消息的单个请求。

$.request('onDoSomething', {
    flash: 1,
    handleFlashMessage: function(message, type) {
        $.oc.flashMsg({ text: message, class: type })
    }
})

全局应用配置到所有AJAX请求。

$(document).on('ajaxSetup', function(event, context) {
    // 在所有AJAX请求上启用对消息的AJAX处理
    context.options.flash = true
    // 在所有AJAX请求上启用StripeLoadIndicator
    context.options.loading = $.oc.stripeLoadIndicator
    // 通过触发类型错误的flashMsg处理错误消息
    context.options.handleErrorMessage = function(message) {
        $.oc.flashMsg({ text: message, class: 'error' })
    }
    // 通过触发消息类型的flashMsg来处理Flash消息
    context.options.handleFlashMessage = function(message, type) {
        $.oc.flashMsg({ text: message, class: type })
    }
})