OctoberCMS开发入门教程 — 使用AJAX的2种模式Data attributes API和JavaScript API

2018-01-13 190

OctoberCMS开发入门教程系列:

以下是二者的功能对照表:

Data attributes API
JavaScript API
描述
data-request
$(this).request()
指定Ajax处理程序名
data-request-confirm
confirm
定义Confirm弹窗字符串,如果不为空, 则根据确认结果来确定是否执行ajax request
data-request-redirect
redirect
定义ajax执行成功后重定向的URL
data-request-update
update
定义数据刷新的局部视图和更新目标元素, 如:'my-partial': '#myelement'
data-request-data
data
向服务端传递参数,格式:id:1, name:'aa'
data-request-before-update
beforeUpdate
局部刷新之前执行,会传递3个参数, 分别是:data=返回数据,textStatus=状态字符串, jqXHR=ajax对象
data-request-success
success
ajax成功时执行,会传递3个参数, 分别是:data=返回数据,textStatus=状态字符串, jqXHR=ajax对象; 如果有定义,则不会触发beforeUpdate、 ajaxUpdate 、ajaxUpdateComplete事件, 因而页面内容也不会update,需要自己刷新
data-request-error
error
ajax发生错误时执行,会传递3个参数, 分别是:data=返回数据,textStatus=状态字符串, jqXHR=ajax对象; 此方法默认会执行并弹出错误消息。
data-request-complete
complete
ajax完成时执行,会传递3个参数, 分别是:data=返回数据,textStatus=状态字符串, jqXHR=ajax对象;
data-request-loading
loading
ajax动画对象,支持css选择器或者任何jq dom对象, 也可以使用框架提供的$.oc.stripeLoadIndicator
data-request-form
form
指定表单元素,如果不设置默认找当前元素最近的表单元素
data-request-flash
flash
如果设置true,ajax请求会附加header头信息X-OCTOBER-REQUEST-FLASH:1, 客户端显示PHP服务端发送的闪存消息
data-request-files
files
文件上传
data-track-input

自动触发文本框的data-request事件
data-attach-loading

ajax执行时增加loading效果, 即在当前元素增加css oc-loader

success方法会返回一个Promise对象,因此可以在success执行完成后执行我们自定义的代码,示例如下:

$('form').request('onSubmit', {success: function(data) {
    this.success(data).done(function() {
        //自定义代码
    });
}})

Data attributes API模式支持data-request的html标签

HTML标签
事件
form
表单提交时触发
a、button
点击时触发
input:Text、number、password
文本框内容改变时触发,同时需要data-track-input
select、checkbox、 radio
选择选项时触发

JavaScript API模式支持重写的方法

方法
描述
handleConfirmMessage(message)
重写confirm
handleErrorMessage(message)
错误显示
handleValidationMessage(message, fields)
数据验证
handleFlashMessage(message, type)
服务端消息提示
handleRedirectResponse(url)
重定向URL

全局AJAX事件

框架中定义了很多全局AJAX事件,我们可以自定义代码实现这些事件

事件
描述
ajaxBeforeSend
发出ajax请求之前触发
ajaxBeforeUpdate
页面元素更新之前触发,附带传递5个参数: event,context,data,statusText, jqXHR
ajaxUpdate
框架更新每个元素后触发,函数传递5个参数: event,context,data,statusText, jqXHR
ajaxUpdateComplete
框架更新全部元素后触发,函数传递5个参数: event,context,data,statusText, jqXHR
ajaxSuccess
ajax请求成功时触发,函数传递5个参数: event,context,data,statusText, jqXHR
ajaxError
ajax请求错误时触发,函数传递5个参数: event,context,message,statusText, jqXHR
ajaxErrorMessage
ajax请求错误时触发,函数传递2个参数: event,message
ajaxConfirmMessage
有定义confirm时触发
ajaxSetup
ajax请求开始之前,可以更改options各种参数
ajaxPromise
triggered directly before the AJAX request is sent.
ajaxFail
ajax请求失败才触发
ajaxDone
ajax请求成功才触发
ajaxAlways
不管Ajax请求失败还是成功,都会触发。

发表评论