Laravel 8中Controller数据无法传递至Ajax及Modal的问题求助

核心问题1：Paket参数获取错误 #

你的Ajax代码中，获取paket值时用了$(this).data('id')，这里的this指向的是模态框实例，而非触发模态框的按钮，导致传递的paket值为空或错误，后端无法查询到正确的库存数据。

修复后的Ajax代码 #

<script>
$('#myModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget); // 获取触发模态框的按钮
    let paket = button.data('id'); // 从按钮的data-id属性读取值
    $.ajax({
        url: '/menu/grd_checkout/' + paket,
        type: 'GET',
        success: function(data) {
            $('#stok').text(data.stok);
        },
        // 添加错误回调便于调试
        error: function(xhr, status, error) {
            console.log('请求错误:', error);
            console.log('响应内容:', xhr.responseText);
        }
    });
});
</script>

核心问题2：Modal HTML结构错误 #

原Modal代码存在标签嵌套错误：缺少<form>起始标签，且modal-footer等元素层级混乱，可能导致DOM元素无法被正确选中。

修复后的Modal代码 #

<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content modal-sm">
            <form> <!-- 补全form起始标签 -->
                <div class="modal-header">
                    <h5 class="modal-title" id="myModalLongTitle">Isi Data Diri dan Jumlah Pemesanan</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="col-sm-6">
                        Stok Voucher Tersedia : <p id="stok"></p>
                    </div>
                </div>
                <div class="modal-footer"> <!-- 修正层级，放入modal-content内部 -->
                    <button type="submit" class="btn btn-success">Submit</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </form>
        </div>
    </div>
</div>

额外验证步骤 #

• 检查路由有效性：直接在浏览器地址栏输入http://你的域名/menu/grd_checkout/测试paket值，确认返回正确的JSON格式数据（如{"stok":3}）。
• 查看控制台报错：打开浏览器开发者工具（F12）的Console标签，点击按钮触发模态框，排查是否有JS语法错误或请求失败信息。
• 验证Controller逻辑：确认Voucher模型的paket、lokasi字段与数据库数据匹配，确保count()能返回正确库存数。

内容的提问来源于stack exchange，提问作者Mochamad Azi Ashary