Shopware 6中如何通过Ajax调用将Twig模板数据传递至控制器？

你可以通过 GET/POST 两种常用请求方式向控制器传递数据，以下是具体实现步骤：

一、通过 GET 请求传递数据 #

修改前端插件代码 #

在 get 方法中，可通过 URL 参数拼接或 HttpClient 的参数选项传递数据。例如传递 productId 和 quantity 参数：

import HttpClient from 'src/service/http-client.service';
import Plugin from 'src/plugin-system/plugin.class';

export default class customPlugin extends Plugin {
    init() {
        // 绑定事件时绑定this上下文，避免丢失插件实例
        document.getElementById("button").addEventListener("click", this.displayDate.bind(this));
        this._client = new HttpClient();
    }

    displayDate() { 
        // 从Twig模板获取数据：比如通过DOM元素的data属性
        const productId = document.getElementById("product").dataset.id;
        const quantity = document.getElementById("quantity").value;

        // 方式一：直接拼接URL参数
        this._client.get(`/ajaxcall?productId=${productId}&quantity=${quantity}`);

        // 方式二：利用HttpClient的params选项（推荐，自动处理参数编码）
        // this._client.get('/ajaxcall', {
        //     params: {
        //         productId: productId,
        //         quantity: quantity
        //     }
        // });
    }
}

控制器接收 GET 参数 #

在控制器中通过 Request 对象的 query 属性获取参数：

use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\JsonResponse;

class AjaxController extends AbstractController
{
    public function ajaxCallAction(Request $request): JsonResponse
    {
        $productId = $request->query->get('productId');
        $quantity = $request->query->get('quantity');

        // 执行你的业务逻辑...

        return new JsonResponse(['success' => true, 'receivedData' => ['productId' => $productId, 'quantity' => $quantity]]);
    }
}

二、通过 POST 请求传递数据（适合大量/敏感数据） #

修改前端插件代码 #

使用 post 方法，将数据作为请求体传入：

import HttpClient from 'src/service/http-client.service';
import Plugin from 'src/plugin-system/plugin.class';

export default class customPlugin extends Plugin {
    init() {
        document.getElementById("button").addEventListener("click", this.displayDate.bind(this));
        this._client = new HttpClient();
    }

    displayDate() { 
        const submitData = {
            productId: document.getElementById("product").dataset.id,
            quantity: document.getElementById("quantity").value,
            // 直接从Twig模板输出变量（需用json_encode转义，避免XSS）
            customerId: {{ customer.id|json_encode }}
        };

        this._client.post('/ajaxcall', JSON.stringify(submitData), {
            headers: {
                'Content-Type': 'application/json'
            }
        });
    }
}

控制器接收 POST 参数 #

通过 Request 对象解析请求体中的 JSON 数据：

use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\JsonResponse;

class AjaxController extends AbstractController
{
    public function ajaxCallAction(Request $request): JsonResponse
    {
        $data = json_decode($request->getContent(), true);
        $productId = $data['productId'] ?? null;
        $quantity = $data['quantity'] ?? null;

        // 如果是表单格式（Content-Type: application/x-www-form-urlencoded），直接用：
        // $productId = $request->request->get('productId');

        // 执行你的业务逻辑...

        return new JsonResponse(['success' => true]);
    }
}

注意事项 #

• 绑定事件时务必用 bind(this) 保留插件实例的上下文，否则无法访问 this._client。
• 从Twig传递数据时，优先使用DOM的 data-* 属性；若直接输出变量，必须用 json_encode 转义，防止XSS漏洞。
• 确保路由配置正确，且控制器通过 @Route 注解设置了合适的访问权限。

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