JavaScript API

• Introduction
• 使用示例
• 全局 AJAX 事件
• 使用示例

#Introduction

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

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

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

的第二个参数request 方法是选项对象。您可以使用与jQuery AJAX 函数.以下选项特定于 Winter 框架：

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

#使用示例

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

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

跑步onCalculate 处理程序并注入呈现的calcresult 部分进入页面元素result CSS类：

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

跑步onCalculate 带有一些额外数据的处理程序：

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

跑步onCalculate 处理程序并在页面元素更新之前运行一些自定义代码：

$('form').request('onCalculate', {
    update: {calcresult: '.result'},
    beforeUpdate: function() { /* do something */ }
})

跑步onCalculate 处理程序，如果成功，运行一些自定义代码和默认success 功能：

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

执行没有 FORM 元素的请求：

$.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 事件在元素上触发。

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

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

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

将配置应用于全局的所有 AJAX 请求。

$(document).on('ajaxSetup', function(event, context) {
    // Enable AJAX handling of Flash messages on all AJAX requests
    context.options.flash = true

    // Enable the StripeLoadIndicator on all AJAX requests
    context.options.loading = $.wn.stripeLoadIndicator

    // Handle Error Messages by triggering a flashMsg of type error
    context.options.handleErrorMessage = function(message) {
        $.wn.flashMsg({ text: message, class: 'error' })
    }

    // Handle Flash Messages by triggering a flashMsg of the message type
    context.options.handleFlashMessage = function(message, type) {
        $.wn.flashMsg({ text: message, class: type })
    }
})