Craft CMS自定义插件：如何实现按钮点击时JS调用插件函数？

1. 编写后端处理函数：创建插件控制器 #

函数要放在插件的controllers目录下的控制器类里，比如创建WidgetActionsController.php：

<?php

namespace yournamespace\yourplugin\controllers;

use Craft;
use craft\web\Controller;

class WidgetActionsController extends Controller
{
    // 仅允许已登录用户访问（根据需求调整）
    protected array|int|bool $allowAnonymous = false;

    public function actionYourTargetFunction()
    {
        // 这里编写你需要执行的业务逻辑
        $request = Craft::$app->getRequest();
        $params = $request->getBodyParam('params'); // 获取前端传入的参数

        // 处理完成后返回JSON响应
        return $this->asJson([
            'success' => true,
            'msg' => '操作执行成功',
            'data' => $params
        ]);
    }
}

注意替换yournamespace\yourplugin为你的插件实际命名空间，方法名前缀action是Craft控制器的约定。

2. 注册插件路由 #

在插件主类（如YourPlugin.php）的init()方法中添加路由规则，让前端能访问到控制器方法：

public function init()
{
    parent::init();

    // 注册路由，格式为「插件句柄/控制器名（小写）/方法名（去掉action前缀，小写）」
    Craft::$app->getUrlManager()->addRules([
        'your-plugin-handle/widget-actions/your-target-function' => 'your-plugin-handle/widget-actions/your-target-function'
    ], false);

    // 其他插件初始化逻辑...
}

替换your-plugin-handle为你的插件实际句柄，确保路由路径和控制器方法对应。

3. 前端JS调用后端函数 #

在Widget关联的JS文件中，给按钮绑定点击事件，通过fetch发送请求：

document.addEventListener('DOMContentLoaded', () => {
    const triggerBtn = document.getElementById('your-widget-button-id');
    if (!triggerBtn) return;

    triggerBtn.addEventListener('click', async () => {
        try {
            // 获取Craft内置的CSRF Token，避免请求被拦截
            const csrfToken = Craft.csrfTokenValue;
            const response = await fetch('/your-plugin-handle/widget-actions/your-target-function', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-Token': csrfToken
                },
                body: JSON.stringify({
                    params: '前端传递的参数内容'
                })
            });

            const result = await response.json();
            if (result.success) {
                console.log(result.msg);
                // 这里添加操作成功后的前端逻辑，比如更新Widget内容
            } else {
                console.error('操作失败:', result.msg || '未知错误');
            }
        } catch (err) {
            console.error('请求出错:', err);
        }
    });
});

替换your-widget-button-id为你的按钮实际ID，确保请求地址和注册的路由一致。

核心说明 #

• 后端函数必须放在控制器类中，这是Craft官方规范的前后端交互方式，通过路由映射实现前端访问。
• 所有POST请求必须携带CSRF Token，否则会被Craft的安全机制拦截，Craft.csrfTokenValue可直接获取当前用户的有效Token。
• 如果是纯数据查询类操作，可改用GET请求，但涉及数据修改的操作建议始终用POST。

内容的提问来源于stack exchange，提问作者Matthias