AJAX事件处理程序

AJAX处理程序

AJAX事件处理程序是PHP函数，可以在页面或布局PHP部分或components中定义。处理程序名称应具有以下格式：onName。所有处理程序都支持使用更新partials作为AJAX请求的一部分。

  1. function onSubmitContactForm()
  2. {
  3.    //...
  4. }

如果在页面和布局中一起定义了两个具有相同名称的函数，则将执行页面处理程序。 components中定义的处理程序具有最低优先级。

调用处理程序

每个AJAX请求都应该使用data attributes API或JavaScript API指定处理程序名称。发出请求后，服务器将搜索所有已注册的处理程序并找到它找到的第一个处理程序。

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

如果两个组件注册相同的处理程序名称，建议在处理程序前加上组件短名称或别名。如果组件使用mycomponent的别名，则可以使用mycomponent::onName来定位处理程序。

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

如果用户更改页面上使用的组件别名，您可能需要使用__SELF__引用变量而不是硬编码别名。

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

通用处理程序

有时您可能需要发出AJAX请求，其唯一目的是更新页面内容，而不需要执行任何代码。为此，您可以使用onAjax处理程序。此处理程序随处可用，无需编写任何代码。(译者注：这个有什么作用呢？)

  1. <button data-request="onAjax">什么也不做</button>

AJAX处理程序中的重定向

如果需要将浏览器重定向到另一个链接，请从AJAX处理程序返回Redirect对象。一旦从服务器返回响应，框架将重定向浏览器。示例AJAX处理程序：

  1. function onRedirectMe()
  2. {
  3.     return Redirect::to('http://google.com');
  4. }

从AJAX处理程序返回数据

通常情况下，您可能希望从AJAX处理程序返回结构化数据。如果AJAX处理程序返回一个数组，您可以在success事件处理程序中访问它的元素。示例AJAX处理程序：

  1. function onFetchDataFromServer()
  2. {
  3.    /* Some server-side code */
  5.     return [
  6.         'totalUsers' => 1000,
  7.         'totalProjects' => 937
  8.     ];
  9. }

可以使用数据属性API获取数据：

  1. <form data-request="onHandleForm" data-request-success="console.log(data)">

与JavaScript API相同：

  1. <form
  2.     onsubmit="$(this).request('onHandleForm', {
  3.         success: function(data) {
  4.             console.log(data);
  5.         }
  6.     }); return false;">

抛出一个AJAX异常

您可以使用AjaxException类抛出AJAX异常，响应为错误，同时保留正常发送响应内容的功能。只需将响应内容作为异常的第一个参数传递。

  1. throw new AjaxException([
  2.     'error' => 'Not enough questions',
  3.     'questionsNeeded' => 2
  4. ]);

注意: 抛出此异常类型partials将更新正常。

在处理程序之前运行代码

有时您可能希望在处理程序执行之前执行代码。将[onInit]函数定义为页面执行生命周期的一部分，允许代码在每个AJAX处理程序之前运行。

  1. function onInit()
  2. {
  3.    //来自页面或者布局
  4. }

您可以在组件类或后台小部件类中定义init方法。

  1. function init()
  2. {
  3.    //来自组件或者小部件
  4. }