如何在Laravel Blade同页面重载后修改支付表单的优惠相关信息

方案1：服务端重载渲染（适配你当前提交表单刷新页面的逻辑） #

• 修改后端/payment/applypromo接口逻辑：优惠码验证通过后，计算优惠抵扣金额、抵扣后实付总金额，将这两个数据连同原有商品金额、验证通过的优惠码一起，重新渲染当前支付页面的视图。
• 调整支付页模板的渲染逻辑，新增优惠字段的判断展示，示例（适配你使用的类Laravel Blade模板语法）：

<form action="{{ url('/pay') }}" method="POST" class="needs-validation">
    <h3>item1    ￥{{ $item1_price }}</h3>
    <h3>item2    ￥{{ $item2_price }}</h3>
    {{-- 存在有效优惠数据时才展示优惠字段 --}}
    @if(isset($valid_promo) && $valid_promo)
    <h3>优惠抵扣  -￥{{ $promo_discount }}</h3>
    <h3>实付总金额  ￥{{ $final_pay_amount }}</h3>
    {{-- 新增隐藏域存储优惠信息，提交支付时传给后端二次校验，避免篡改 --}}
    <input type="hidden" name="used_promocode" value="{{ $promocode }}">
    <input type="hidden" name="promo_discount" value="{{ $promo_discount }}">
    @endif
    <button class="btn btn-primary btn-lg btn-block" type="submit">CHECKOUT</button>
</form>

• 页面重载后回显用户已输入的有效优惠码到输入框，避免用户重复输入。

方案2：AJAX无刷新更新（用户体验更优，无需重载页面） #

• 给优惠表单绑定提交事件，阻止默认跳转提交行为，通过AJAX异步传输优惠码到后端校验。
• 后端接口调整为返回JSON格式的结果，验证成功返回优惠金额、实付金额，验证失败返回错误提示。
• 前端拿到返回结果后，动态插入优惠字段到商品条目下方，同时将优惠信息写入支付表单的隐藏域即可，示例代码：

调整后的优惠表单代码 #

<form action="{{ url('/payment/applypromo') }}" method="POST" class="needs-validation promo-form">
    <input type="text" id="promocode" name="promocode" placeholder="输入优惠码" style="height:40px; width:200px">
    <button class="btn btn-primary" type="submit" style="height:40px; width:200px">应用优惠</button>
</form>

调整后的支付表单代码 #

<form action="{{ url('/pay') }}" method="POST" class="needs-validation payment-form">
    <h3>item1    price</h3>
    <h3>item2    price</h3>
    <button class="btn btn-primary btn-lg btn-block" type="submit">CHECKOUT</button>
</form>

JS逻辑示例（基于jQuery） #

$('.promo-form').on('submit', function(e) {
    // 阻止默认表单提交跳转
    e.preventDefault();
    const promoCode = $('#promocode').val().trim();
    if(!promoCode) return alert('请输入优惠码');
    $.post({
        url: '/payment/applypromo',
        data: {
            promocode: promoCode,
            _token: '{{ csrf_token() }}' // Laravel框架需要传递CSRF令牌
        },
        success: function(res) {
            if(res.status === 'success') {
                // 动态插入优惠字段
                const promoHtml = `
                <h3>优惠抵扣  -￥${res.discount}</h3>
                <h3>实付总金额  ￥${res.final_amount}</h3>
                <input type="hidden" name="used_promocode" value="${promoCode}">
                <input type="hidden" name="promo_discount" value="${res.discount}">`;
                $('.payment-form button').before(promoHtml);
                alert('优惠码应用成功');
            } else {
                alert(res.msg);
            }
        }
    })
})

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