Drupal7中如何在输入框onchange时通过Ajax调用模块函数更新购物车

我来帮你搞定这个问题！在Drupal里用Chaos工具（CTools）的use-ajax类配合输入框的onchange事件触发购物车更新，确实需要一点额外的JS处理——因为默认的use-ajax只绑定在链接和按钮上，输入框的change事件不在它的默认监听范围内。下面是一步步的落地方案：

1. 先确保后端路由与回调就绪 #

首先，你需要在模块的routing.yml里注册更新购物车的Ajax路由，指向你的处理函数：

mymodule.update_cart:
  path: '/update-cart'
  defaults:
    _controller: '\Drupal\mymodule\Controller\CartController::updateCart'
    _title: 'Update Cart'
  requirements:
    _permission: 'access content' # 根据你的实际需求调整权限

然后在控制器里编写处理逻辑，返回标准的Drupal Ajax响应：

namespace Drupal\mymodule\Controller;

use Drupal\Core\Controller\ControllerBase;
use Symfony\Component\HttpFoundation\Request;
use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Ajax\ReplaceCommand;

class CartController extends ControllerBase {
  public function updateCart(Request $request) {
    $quantity = $request->request->get('quantity');
    $productId = $request->request->get('product_id');
    
    // 调用你已经写好的更新购物车核心函数
    $this->myCustomCartUpdateFunction($productId, $quantity);
    
    // 准备Ajax响应，比如替换页面上的购物车区块内容
    $cartBlock = \Drupal::service('renderer')->render(\Drupal\block\Entity\Block::load('my_cart_block')->build());
    $response = new AjaxResponse();
    $response->addCommand(new ReplaceCommand('#my-cart-block', $cartBlock));
    
    return $response;
  }
}

2. 配置前端数量输入框 #

给数量输入框添加必要的属性，用来传递Ajax请求的关键信息：

<input type="number" 
       class="cart-quantity-input" 
       data-ajax-url="/update-cart" 
       data-product-id="123" <!-- 替换为实际的产品ID -->
       value="1">

这里不用强制加use-ajax类，因为我们要手动触发Ajax；如果习惯用类标记元素，加上也不会有冲突。

3. 编写Drupal行为绑定onchange事件 #

Drupal推荐用**行为（Behaviors）**来管理JS，避免页面Ajax更新后重复绑定事件。创建一个JS文件（比如mymodule.cart.js），加入以下代码：

(function ($, Drupal) {
  Drupal.behaviors.cartQuantityUpdate = {
    attach: function (context, settings) {
      // 使用once()确保每个输入框只绑定一次事件
      $('.cart-quantity-input', context).once('cart-quantity-trigger').on('change', function () {
        const $input = $(this);
        const quantity = $input.val();
        const productId = $input.data('product-id');
        
        // 创建Drupal Ajax对象，复用Drupal的Ajax系统
        const ajax = Drupal.ajax({
          url: $input.data('ajax-url'),
          method: 'POST',
          // 传递给后端的参数
          submit: {
            quantity: quantity,
            product_id: productId
          },
          // 成功后的自定义回调
          success: function (response) {
            // 执行Drupal Ajax的默认成功逻辑（处理返回的命令）
            Drupal.ajax.prototype.success.call(this, response);
            // 可以添加自定义提示，比如告知用户购物车已更新
            Drupal.message.add(this.t('购物车已更新'), 'status');
          }
        });
        
        // 触发Ajax请求
        ajax.execute();
      });
    }
  };
})(jQuery, Drupal);

4. 确保JS文件被正确加载 #

记得在模块的mymodule.libraries.yml里注册这个JS文件：

cart_update:
  js:
    js/mymodule.cart.js: {}
  dependencies:
    - core/drupal.ajax
    - core/jquery.once

然后在需要显示购物车的页面或区块模板里加载这个库：

{{ attach_library('mymodule/cart_update') }}

• 为什么直接用use-ajax类不生效？因为Drupal的Ajax系统默认只监听<a>和<button>/<input type="submit">的点击事件，输入框的change事件不在它的默认监听列表里，所以需要手动绑定并触发请求。
• 使用once()是Drupal开发的最佳实践，能避免页面Ajax更新后重复绑定事件，防止多次触发请求。
• 后端返回的AjaxResponse可以用各种Ajax命令（比如ReplaceCommand、AppendCommand）灵活更新页面内容，完全匹配你的业务需求。

内容的提问来源于stack exchange，提问作者Juanjo Cruz Cabello