Magento 2：如何将phtml文件输入值传递至Block类？

嘿，我看你现在卡在前后端交互的关键点上了——直接在JS里调用PHP方法是行不通的，因为PHP是服务器端代码，页面加载时就会执行，根本等不到用户输入内容；而且你遇到的"document未定义"也和Magento的前端框架加载逻辑有关。咱们一步步来解决：

核心问题分析 #

1. 前后端混淆：你写的<?= $block->updatePayment() ?>会在页面渲染阶段就执行PHP方法，而不是用户点击按钮时。PHP运行在服务器，拿不到客户端的输入值。
2. DOM就绪问题：用document.getElementById时可能DOM还没完全加载，加上Magento默认用Prototype框架，最好用它的语法来操作DOM。

正确的解决方案：用Ajax实现前后端交互 #

Magento里不能直接调用Block的方法处理请求，得通过Controller来接收前端的Ajax请求，再处理数据库更新。

第一步：创建Adminhtml控制器处理请求 #

在你的自定义模块下创建Controller/Adminhtml/Order/UpdatePayment.php，用来接收前端的支付金额并更新订单：

<?php
namespace Vendor\Module\Controller\Adminhtml\Order;

use Magento\Backend\App\Action;
use Magento\Backend\App\Action\Context;
use Magento\Sales\Model\OrderRepository;
use Magento\Framework\Exception\NoSuchEntityException;

class UpdatePayment extends Action
{
    protected $orderRepository;

    public function __construct(
        Context $context,
        OrderRepository $orderRepository
    ) {
        parent::__construct($context);
        $this->orderRepository = $orderRepository;
    }

    public function execute()
    {
        $result = ['success' => false];
        $orderId = $this->getRequest()->getParam('order_id');
        $paidAmount = $this->getRequest()->getParam('paid_amount');

        if ($orderId && is_numeric($paidAmount) && $paidAmount >= 0) {
            try {
                $order = $this->orderRepository->get($orderId);
                $currentPaid = $order->getTotalPaid();
                $order->setTotalPaid($currentPaid + $paidAmount);
                $this->orderRepository->save($order);
                
                $result['success'] = true;
                $result['message'] = __('Payment amount updated successfully.');
            } catch (NoSuchEntityException $e) {
                $result['message'] = __('Order not found.');
            } catch (\Exception $e) {
                $result['message'] = __('Error updating payment: %1', $e->getMessage());
            }
        } else {
            $result['message'] = __('Invalid input.');
        }

        $this->getResponse()->representJson(
            $this->_objectManager->get(\Magento\Framework\Json\Helper\Data::class)->jsonEncode($result)
        );
    }

    protected function _isAllowed()
    {
        return $this->_authorization->isAllowed('Vendor_Module::order_update_payment');
    }
}

第二步：在Block中添加获取Ajax请求URL的方法 #

在你的Block类里新增一个方法，生成控制器的请求URL（自动带上当前订单ID）：

public function getUpdatePaymentUrl()
{
    return $this->getUrl('vendor_module/order/updatePayment', ['order_id' => $this->getOrder()->getId()]);
}

第三步：修改phtml文件的前端代码 #

更新你的phtml，用Prototype的Ajax方法发送请求，同时处理输入验证和反馈：

<input id="update-payment-input" type="text" style="text-align:right;" value="<?= $block->setDefaultAmountForPayment() ?>">
<button id="update-payment-submit" type="button"><?= __('Update Payment') ?></button>

<script>
require(['prototype'], function() {
    // 确保DOM完全加载后再绑定事件
    document.observe('dom:loaded', function() {
        var submitBtn = $('update-payment-submit');
        var inputField = $('update-payment-input');

        submitBtn.observe('click', function() {
            var paidAmount = inputField.getValue().trim();
            // 验证输入是否为有效正数
            if (!paidAmount || isNaN(parseFloat(paidAmount)) || parseFloat(paidAmount) < 0) {
                alert('<?= __('Please enter a valid positive number.') ?>');
                return;
            }

            // 发送Ajax请求到控制器
            new Ajax.Request('<?= $block->escapeJs($block->getUpdatePaymentUrl()) ?>', {
                method: 'post',
                parameters: { paid_amount: paidAmount },
                onSuccess: function(response) {
                    var result = response.responseText.evalJSON();
                    if (result.success) {
                        alert(result.message);
                        // 刷新页面更新支付金额显示
                        window.location.reload();
                    } else {
                        alert(result.message);
                    }
                },
                onFailure: function() {
                    alert('<?= __('An error occurred while processing your request.') ?>');
                }
            });
        });
    });
});
</script>

额外注意事项 #

• 权限控制：记得在模块的acl.xml里添加Vendor_Module::order_update_payment权限，确保只有授权用户能执行这个操作。
• 输入验证：前端和后端都要做验证，避免恶意输入导致的问题。
• 安全处理：用$block->escapeJs()处理URL，防止XSS攻击。

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