如何通过AJAX传递Laravel控制器数组并基于数据生成按钮

现有代码回顾 #

颜色选择表单 #

<form class="form form-variant" id="myForm{{$skuItemVariant_colorJs->SkuColorId}}">
    {{ csrf_field() }}
    <button type="submit" class="btn btn-success checkbox_click" id="colorChange" style="color: purple !important"> Color </button> 
</form>

（注：修正了原代码中style="colors: purple"的拼写错误，改为color: purple）

现有AJAX代码 #

$(document).ready(function(){
    $('#myForm{{$skuItemVariant_colorJs->SkuColorId}}').submit(function(e){
        e.preventDefault();
        $.ajax({
            url: "{{ url('product-detail/getsize') }}",
            type: "POST",
            data: $('.form-variant{{$skuItemVariant_colorJs->SkuColorId}}').serialize(),
            success: function(data){
                // 此处需要添加生成尺寸按钮的逻辑
            },
            error: function(){
                alert("Form submission failed!");
            }
        });
    });
});

接口返回的JSON数据示例 #

[
    {"Id": 18, "SkuItemId": 19, "SkuSizeId": 17, "SkuColorId": 18, "SkuVariantStock": 1, "Barcode": "000018"},
    {"Id": 20, "SkuItemId": 19, "SkuSizeId": 18, "SkuColorId": 18, "SkuVariantStock": 1, "Barcode": "000020"}
]

修改后的完整实现代码 #

1. 更新HTML结构（添加尺寸按钮容器） #

<form class="form form-variant" id="myForm{{$skuItemVariant_colorJs->SkuColorId}}">
    {{ csrf_field() }}
    <button type="submit" class="btn btn-success checkbox_click" id="colorChange" style="color: purple !important"> Color </button> 
</form>
<!-- 添加尺寸按钮的容器 -->
<div id="size-buttons-container" class="mt-3"></div>

2. 完善AJAX的成功回调逻辑 #

$(document).ready(function(){
    $('#myForm{{$skuItemVariant_colorJs->SkuColorId}}').submit(function(e){
        e.preventDefault();
        const sizeContainer = $('#size-buttons-container');
        // 先清空原有尺寸按钮，避免重复生成
        sizeContainer.empty();
        
        $.ajax({
            url: "{{ url('product-detail/getsize') }}",
            type: "POST",
            data: $(this).serialize(), // 用$(this)代替类选择器，更精准
            dataType: 'json', // 指定返回数据类型为JSON
            success: function(data){
                // 遍历返回的尺寸数据生成按钮
                data.forEach(item => {
                    // 根据库存状态决定按钮是否禁用
                    const isDisabled = item.SkuVariantStock <= 0 ? 'disabled' : '';
                    const btnClass = isDisabled ? 'btn btn-secondary' : 'btn btn-primary';
                    
                    // 创建尺寸按钮元素（如果有尺寸名称字段，可替换`尺寸 ${item.SkuSizeId}`为对应名称）
                    const sizeBtn = $(`<button type="button" class="${btnClass} me-2 mb-2" ${isDisabled} 
                                        data-sku-size-id="${item.SkuSizeId}" 
                                        data-sku-item-id="${item.SkuItemId}">
                                        尺寸 ${item.SkuSizeId}
                                      </button>`);
                    
                    // 给尺寸按钮添加点击事件（可根据需求自定义逻辑）
                    sizeBtn.click(function(){
                        // 示例：切换选中状态，同时取消其他按钮的选中状态
                        $(this).toggleClass('active').siblings().removeClass('active');
                        console.log('选中的尺寸ID:', $(this).data('sku-size-id'));
                    });
                    
                    // 将按钮添加到容器中
                    sizeContainer.append(sizeBtn);
                });
                
                // 如果没有返回尺寸数据，提示用户
                if(data.length === 0){
                    sizeContainer.html('<p class="text-muted">该颜色暂无可用尺寸</p>');
                }
            },
            error: function(){
                alert("获取尺寸数据失败，请重试！");
                sizeContainer.html('<p class="text-danger">加载尺寸失败，请稍后重试</p>');
            }
        });
    });
});

关键说明 #

• 清空原有容器：每次请求前清空尺寸容器，防止重复生成按钮
• 数据类型指定：添加dataType: 'json'确保返回数据被正确解析为JSON对象
• 库存状态处理：根据SkuVariantStock字段判断按钮是否禁用，避免用户选择无库存的尺寸
• 自定义数据存储：通过data-*属性存储SKU相关信息，方便后续业务逻辑（比如提交订单时获取选中的尺寸ID）
• 空数据提示：当接口返回空数组时，给用户友好的无尺寸提示

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