OctoberCMS开发入门教程 — AJAX框架使用简介

2018-01-05 237

OctoberCMS开发入门教程系列:

AJAX基于JQuery,所以必须在页面引入JQuery,此外还要引入 framework.js、framework.extras.js和framework.extras.css,可以使用标签 {% framework %},{% framework extras %} ,相关文件在/modules/system/assets/js目录

AJAX框架实现原理

所有ajax请求都走ajax控制器方法,同时在Request Headers传递自定义信息,如:

X-OCTOBER-REQUEST-HANDLER:onTest(定义后台数据处理方法)

X-OCTOBER-REQUEST-PARTIALS:calcresult (定义前端页面更新部分视图文件名)

X-Requested-With:XMLHttpRequest

后台PHP获取X-OCTOBER-REQUEST-HANDLER参数找到并执行对应的后台逻辑代码,然后返回JSON格式的数组数据或者已解析的视图文件html,前端根据update dom更新页面元素数据或者自行解析返回的json数据。

AJAX处理器方法

方法可以定义在模板页面的php代码标签里,也可以定义在组件文件里; 方法名称必须以on开头,如:onTest

框架提供了onAjax默认方法,此方法会执行一个ajax请求,不执行任何代码,仅仅刷新页面。

AJAX方法调用

支持数据属性data attributes API 和 JavaScript API 两种方式

<!-- Attributes API -->
<button data-request="onSubmitContactForm">Go</button>
<!-- JavaScript API -->
<script> $.request('onSubmitContactForm') </script>

如果多个组件有相同的方法名,可以使用组件名:方法名,如:

<button data-request="mycomponent::onSubmitContactForm">Go</button>

或者在当前组件内使用__SELF__关键词,如:

<form data-request="{{ __SELF__ }}::onSubmitContactForm" data-request-update="'{{ __SELF__ }}::calcresult': '#result'">

AJAX重定向

默认ajax是不支持重定向的,因为ajax本身就是页面局部刷新。如果在ajax处理器方法里使用了Redirect重定向方法,网页就会跳转,这是一个技巧,某些时候很有用,如:Redirect::to('http://www.baidu.com');

AJAX返回数据

ajax处理器除了支持返回视图,还支持返回数组数据,我们可以在ajax success中使用序列化后的json数据,然后自己来更新页面数据。

AJAX异常

AjaxException异常类支持传递变量并响应请求返回数据。

发表评论