Laravel循环表单仅首个按钮可触发AJAX，其余按钮无响应求助

兄弟，这个坑我之前也踩过！核心问题是HTML中的ID必须全局唯一，你在foreach循环里给每个表单都加了id="ajaxForm"，每个按钮都加了id="btnSave"，jQuery用$("#btnSave")选择元素时，只会匹配页面上第一个符合条件的元素，后面的按钮自然就没绑定到事件啦。

下面是具体的修复步骤：

1. 修改视图代码：替换ID为Class #

把循环里的表单和按钮的ID改成Class，既能统一选择，又不会出现重复标识：

<tbody>
    @foreach($customers as $name => $member)
        @foreach($member->slice(0,1) as $value)
            <tr>
                <td>{{$value->id}}</td>
                <td>{{$value->MATNR}}</td>
                <td>{{$value->MAKTX}}</td>
                <td>
                    <select class="form-control">
                        <option>{{$value->UNIT1}}({{$value->CONV1}})</option>
                        <option>{{$value->UNIT2}}({{$value->CONV2}})</option>
                    </select>
                </td>
                <td>
                    <select class="form-control">
                        @foreach($member as $value)
                            <option value="{{$value->CHARG}}">{{$value->CHARG}}</option>
                        @endforeach
                    </select>
                </td>
                <td>{{$value->VERME}}</td>
                <td>
                    <!-- 将id替换为class -->
                    <form name="ajaxForm" class="form-horizontal ajaxForm" novalidate="">
                        <input type="text" name="_token" value="{{ csrf_token() }}">
                        <input type="text" name="id" value="{{$value->id}}">
                        <!-- 将id替换为class -->
                        <button type="button" class="btn btn-primary btnSave" value="add">Save</button>
                    </form>
                </td>
            </tr>
        @endforeach
    @endforeach
</tbody>

2. 修改AJAX代码：绑定到Class并获取当前表单 #

现在要绑定到.btnSave类，并且通过$(this)找到当前按钮所属的表单，确保序列化的是对应表单的数据：

$(document).ready(function(){
    // 绑定到.btnSave类，匹配所有按钮
    $(".btnSave").click(function (e) {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
            }
        })
        e.preventDefault();
        
        // 获取当前点击按钮所在的表单
        var targetForm = $(this).closest('.ajaxForm');
        
        $.ajax({
            type: 'POST',
            url: '/cart', // 加上斜杠避免相对路径问题
            data: targetForm.serialize(), // 序列化当前表单的内容
            dataType: 'json',
            success: function (data) {
                console.log('请求成功:', data);
            },
            error: function (data) {
                console.log('请求出错:', data);
            }
        });
    });
});

3. 完善控制器代码：返回JSON响应 #

你的控制器目前没有返回任何响应，AJAX请求后会因为没有数据返回进入error回调，需要添加返回逻辑：

public function cart() {
    if (Request::isMethod('post')) {
        $id = Request::get('id');
        $customers = DB::table('Materials')
            ->select('Materials.MATNR','Materials.MAGRV','Materials.CONV1','Materials.id','Materials.CONV1','Materials.UNIT1','Materials.CONV2','Materials.UNIT2','Materials.MHDHB','Materials.MAKTX','Inventory.CHARG','Inventory.VERME')
            ->join('Inventory',function($join){
                $join->on('Inventory.MATNR','LIKE',DB::raw("CONCAT('%',Materials.MATNR,'%')"));
            })
            ->groupBy('Materials.MATNR','Materials.MAGRV','Materials.CONV1','Materials.id','Materials.CONV1','Materials.UNIT1','Materials.CONV2','Materials.UNIT2','Materials.MHDHB','Materials.MAKTX','Inventory.CHARG','Inventory.VERME')
            ->find($id);
            
        $cart = ShoppingCart::add($customers->id, $customers->CHARG, 5, 100.00, ['MAKTX' => $customers->MAKTX, 'kg' => $customers->VERME]);
        
        // 返回成功的JSON响应
        return response()->json([
            'status' => 'success',
            'message' => '商品已添加到购物车',
            'cart_item' => $cart
        ]);
    }
    
    // 处理GET请求的情况
    return response()->json(['status' => 'error', 'message' => '无效的请求方式']);
}

额外小提醒 #

• 确保页面头部已经添加了CSRF元标签：<meta name="_token" content="{{ csrf_token() }}">，这样AJAX的CSRF验证才能正常工作。
• 路由中的Route::post('/cart', 'system\request_customer@cart');配置没问题，AJAX的url用/cart比cart更稳妥，避免相对路径混乱。

这样修改后，每个按钮点击都会触发对应的AJAX请求啦！

内容的提问来源于stack exchange，提问作者Jemwel Beltran Libron