表单数据请求 OctoberCMS - JavaScript

在 OctoberCMS 上，我们可以通过 JavaScript 来向后台发送表单数据请求。本文将介绍如何使用 jQuery 的 $.ajax() 方法发送表单请求。

步骤

1. 给表单添加一个 ID

   <form id="my-form">
      <!-- 表单字段 -->
   </form>
   

2. 为表单添加一个 JavaScript 事件监听器，捕获提交事件并阻止表单的默认行为（即提交表单）

   $('#my-form').submit(function(event) {
      event.preventDefault()
      // ... 发送表单数据请求
   })
   

3. 使用 $.ajax() 方法发送请求，处理程序的 URL 地址为 (URL_ROOT + '/ajax/[PLUGIN]/[CONTROLLER]/[METHOD]')，其中 URL_ROOT 为 OctoberCMS 的根 URL，PLUGIN、CONTROLLER、METHOD 分别为插件、控制器、方法的名称。数据将会以 JSON 格式发送到处理程序中。

   $.ajax({
      method: 'POST',
      url: URL_ROOT + '/ajax/[PLUGIN]/[CONTROLLER]/[METHOD]',
      data: $('#my-form').serialize(),
      success: function(data) {
         // ... 处理成功回调
      },
      error: function(xhr, textStatus, errorThrown) {
         // ... 处理错误回调
      },
   });
   

4. 在处理程序中处理表单数据请求，将结果以 JSON 格式返回。

   public function onMyFormSubmit()
   {
      // ... 处理表单数据请求
      return response()->json(['success' => true, 'message' => '处理成功']);
   }
   

总结

使用 JavaScript 发送表单数据请求是一个相对简单的过程，需要注意的是，插件、控制器和方法的名称应该正确，并且在处理程序中应处理表单数据并返回 JSON 格式的结果。感谢您对 OctoberCMS 的使用！