如何在Ajax提交后更新PayPal按钮金额而非重复创建按钮

我明白你的问题了——每次选择新的下拉选项提交后，PayPal按钮都会在旧按钮下面叠加生成，而不是更新现有按钮的价格。这是因为你每次Ajax请求成功后，都直接把完整的按钮渲染代码插入到页面中，没有清理掉之前的按钮实例或容器内容，导致重复渲染。

下面是两种可行的解决方案，优先推荐第一种，因为它更灵活、易维护：

方案一：前端维护按钮渲染逻辑，后端仅返回价格 #

这种方式把按钮的渲染逻辑放在前端，后端只返回计算后的价格，这样我们可以轻松控制按钮的销毁和重建：

步骤1：修改前端代码，封装按钮渲染函数 #

首先在你的JS中添加一个可复用的按钮渲染函数，并且保存按钮实例以便后续销毁：

// 全局变量保存PayPal按钮实例
let paypalButtonInstance;

// 渲染PayPal按钮的函数，接收价格参数
function renderPayPalButton(totalAmount) {
    // 如果已有按钮实例，先销毁它
    if (paypalButtonInstance) {
        paypalButtonInstance.close();
    }

    // 渲染新的按钮
    paypalButtonInstance = paypal.Button.render({
        env: 'sandbox', // sandbox | production
        style: {
            label: 'generic',
            size: 'small',
            shape: 'pill',
            tagline: false,
            color: 'gold'
        },
        client: {
            sandbox: 'AWqKtLAN25BqUyOzBLtH8deIFj-mNFrW4fqEie1Is6n4wnO0-bXTkoU5WJNtjLQSd_Uv5ax3bEUmeuuC',
            production: 'AZw2Rw7pnweBi5exyjuPUEzC5jo3L7x2ksE8FxHzKKXm4qNhUegsJm15icAyEk3IV6gg46Nib-D5Crm1'
        },
        commit: true,
        payment: function(data, actions) {
            return actions.payment.create({
                payment: {
                    transactions: [{
                        amount: {
                            total: totalAmount,
                            currency: 'GBP'
                        }
                    }]
                }
            });
        },
        onAuthorize: function(data, actions) {
            return actions.payment.execute().then(function() {
                return actions.redirect();
            });
        },
        onCancel: function(data, actions) {
            return actions.redirect();
        }
    }, '#paypal-button-container');
}

步骤2：修改Ajax提交逻辑，接收后端返回的价格 #

更新你的表单提交事件，让Ajax请求仅获取价格，然后调用渲染函数：

$('.myForm2').on('submit', function(e) {
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: 'submissionVAT.php',
        data: $(this).serialize(),
        success: function(server_response) {
            // 去除响应中的多余空格，确保价格格式正确
            const newPrice = server_response.trim();
            // 用新价格渲染按钮
            renderPayPalButton(newPrice);
        }
    });
});

步骤3：修改后端submissionVAT.php，仅返回价格 #

把原来输出完整按钮代码的逻辑改成只输出计算后的价格：

<?php
// 这里保留你获取选中选项、计算$randomItem的逻辑
// ...

// 只输出价格即可
echo $randomItem;
?>

方案二：保留后端生成按钮代码，前端清理容器后重新执行 #

如果你不想改动太多现有逻辑，可以在每次插入新代码前清空按钮容器，并且手动执行插入的JS代码：

修改前端Ajax的success回调： #

$('.myForm2').on('submit', function(e) {
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: 'submissionVAT.php',
        data: $('.myForm2').serialize(),
        success: function(server_response) {
            // 先清空PayPal按钮容器，避免叠加
            $("#paypal-button-container").empty();
            // 更新result容器内容
            $(".result").html(server_response);
            // 手动执行插入的script代码（因为jQuery的html()不会自动执行script标签）
            $(".result script").each(function() {
                eval($(this).text());
            });
        }
    });
});

⚠️ 注意：eval函数存在安全风险，如果你的后端响应内容不可控，不建议使用这种方式。

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