Magento2中通过KnockoutJS与控制器跳转至心愿单添加商品问题

问题根源 #

1. AJAX请求无法触发页面重定向：你通过AJAX调用控制器，服务器返回的重定向响应只会被AJAX的success回调接收，浏览器不会自动执行页面跳转。
2. 控制器重定向参数传递错误：setUrl方法的第二个参数不能直接传参数数组，需要通过UrlInterface构建包含参数的完整URL。
3. 无需通过AJAX获取form_key：Magento页面全局变量window.FORM_KEY已经包含当前有效的form key，可直接在前端使用，无需额外请求控制器。

解决方案 #

方案一：前端直接构造URL跳转（最简洁）

删除原AJAX逻辑，直接拼接包含form_key和商品ID的目标URL，触发浏览器跳转：

addToWishlist(productRelatedId) {
    console.log("product id", productRelatedId);
    // 直接使用全局FORM_KEY构建跳转URL
    const targetUrl = urlBuilder.build('wishlist/index/add', {
        'form_key': window.FORM_KEY,
        'product': productRelatedId
    });
    // 执行页面跳转
    window.location.href = targetUrl;
}

此方案无需修改控制器，直接利用前端已有的form_key完成跳转，流程更高效。

方案二：保留AJAX流程，控制器返回跳转URL

如果必须保留AJAX请求，需修改控制器返回JSON格式的目标URL，再由前端手动触发跳转：

1. 控制器代码修改：

<?php

namespace Devlat\RelatedProducts\Controller\Wishlist;

use Magento\Framework\App\Action\HttpGetActionInterface; 
use Magento\Framework\App\RequestInterface; 
use Magento\Framework\Controller\Result\JsonFactory; 
use Magento\Framework\Data\Form\FormKey;
use Magento\Framework\UrlInterface;

class Data implements HttpGetActionInterface
{
    /**
     * @var FormKey
     */
    private $formKey;
    /**
     * @var JsonFactory
     */
    private $jsonFactory;
    /**
     * @var RequestInterface
     */
    private $request;
    /**
     * @var UrlInterface
     */
    private $url;

    public function __construct(
        FormKey $formKey,
        JsonFactory $jsonFactory,
        RequestInterface $request,
        UrlInterface $url
    )
    {
        $this->formKey = $formKey;
        $this->jsonFactory = $jsonFactory;
        $this->request = $request;
        $this->url = $url;
    }

    public function execute()
    {
        $formKey = $this->formKey->getFormKey();
        $data = $this->request->getParams();
        // 构建心愿单添加页面的完整URL
        $targetUrl = $this->url->getUrl('wishlist/index/add', [
            'form_key' => $formKey,
            'product' => $data['productId']
        ]);
        
        $result = $this->jsonFactory->create();
        return $result->setData(['redirect_url' => $targetUrl]);
    }
}

2. 前端KnockoutJS代码修改：

addToWishlist(productRelatedId) {
    console.log("product id", productRelatedId);
    const params = {
        'productId': productRelatedId,
    };
    var url = urlBuilder.build('related/wishlist/data');
    $.ajax({
        url: url,
        data: params,
        type: "GET",
        success : function (response) {
            if (response.redirect_url) {
                // 手动触发页面跳转
                window.location.href = response.redirect_url;
            }
        }
    });
}

额外注意事项 #

• 确保urlBuilder已在你的Knockout组件中正确注入（需依赖Magento默认的mage/url模块）。
• 心愿单的add动作默认支持GET请求，若你的Magento配置限制为仅POST，需调整请求方式或修改心愿单控制器的配置。

内容的提问来源于stack exchange，提问作者Oscar R. Gamboa A.