laravel 8 没有从 ajax 请求中获取数据

Question

我一直无法在服务器中获取多个复选框的值，每次我转储时总是给我 null。

但是我可以在控制台中获取这些值，但我希望它们位于服务器中，不幸的是我不知道该怎么做。我从这个网站、yotube 等尝试了很多方法，但我一直失败。我还在学习中，希望你能理解我的解释，非常感谢你抽出宝贵的时间来写这篇文章

这是表单代码

<form action="/kelompok-asistensi/asisten/{{$user->id}}/peserta" method="POST" id="formtambahpeserta">
                    @csrf
                    <div class="modal-body" id="modalLgContent">
                        <div class="d-flex">
                            <div class="asisten-pendamping">Asisten</div>
                            <div class="nama-asisten">{{$asisten->nama}}</div>
                        </div>
                        @if($peserta_all->count() > 0)
                        <div class="pilih">
                            Pilih peserta untuk ditambah ke kelompok ini
                        </div>
                        @endif
                        <div class="card">
                            <div class="alert alert-success collapse" role="alert" id="success-alerts">
                                <span class="success-text"></span>
                            </div>
                            @if($peserta_all->count() > 0)
                            <table class="table pilih-peserta" cellspacing="0" id="example">
                                <thead>
                                    <tr>
                                        <th class="col-1"></th>
                                        <th class="col-2">No</th>
                                        <th class="col-3">NPM</th>
                                        <th class="col-4">Nama</th>
                                        <th class="col-5">Angkatan</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($peserta_all as $data)
                                    <tr>
                                        <td><input type="checkbox" class="checkbox" name="check-box" id="chk" value="{{ $data->id }}"></td>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $data->npm }}</td>
                                        <td>{{ $data->nama }}</td>
                                        <td>{{ $data->id_angkatan }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            @else
                            <div class="status">
                                <a>Tidak ada peserta untuk dapat ditambah</a>
                            </div>
                            @endif
                        </div>
                        <input name="id_asisten" type="hidden" class="form-control" id="id_asisten" autocomplete="off" value="{{ $user->id }}">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-link" data-dismiss="modal" style="color: rgb(71, 71, 71);">Close</button>
                        @if($peserta->count() > 0)
                        <button type="submit" class="btn btn-outline-primary" id="habc">Tambah</button>
                        @endif
                    </div>
                </form>

这是javascript代码

$(document).ready( function () {
table = $('#example').DataTable({
    "order": [[ 1, "asc" ]],
    "pagingType": "numbers",
    "pageLength": 15,
    "info":     false,
    language: {
    searchPlaceholder: "cari",
    search: "",
    },
    columnDefs: [
    { "targets": 0, "sortable":false },
    { "targets": 1 },
    { "targets": 2, "sortable":false },
    { "targets": 3, "sortable":false },
    { "targets": 4 }
    ]
});

$("#formtambahpeserta").on('submit', function(e){
    let checkbox_terpilih = $('#example tbody .checkbox:checked');
    let semua_npm = [];
    $.each(checkbox_terpilih, function(i, elm) {
        semua_npm.push(elm.value);
    });
    console.log(semua_npm);
    $.ajax({
        url:$(this).attr('action'),
        method:'post',
        dataType: 'json',
        data: {npm:semua_npm},
        contentType:"application/json; charset=utf-8",
        success:function(res){
            table.ajax.reload(null, false);
            $("#modaltambahpeserta").modal('hide');
        }
    });
}); });

这是控制器

    public function peserta_tambah(Request $request, User $user)
{
    dd($request->npm);
    Peserta::where('id_asisten', $user->id)->whereIn('id', $request->npm)->update(['id_asisten' => $user->id]);
    return response()->json(true);
}

编辑：

这是路线

Route::post('/kelompok-asistensi/asisten/{user:id}/peserta', [KelompokController::class, 'peserta_tambah']);

这是我从 dd($request->all()); 得到的。

所以我检查了多个复选框并且只有一个数据，而且ajax中似乎没有数组，因为它在请求中看不到

这是在 ajax 调用之前警告“semua_npm”变量，它是一个数组

网络标签

Answer 1

您需要从 ajax 中删除 contentType:"application/json; charset=utf-8"。所以它使用默认内容类型。

如果你没有在 ajax 中全局设置 csrf 令牌

 $.ajax({
            url:$(this).attr('action'),
            method:'post',
           
            data: {npm:semua_npm,  _token: @json(csrf_token())},
      
            success:function(res){

            }
        });

然后在你的服务器端你可以像这样访问

$request['npm']

更新

$("#formtambahpeserta").on('submit', function(e){
e.preventDefault();
    let checkbox_terpilih = $('#example tbody .checkbox:checked');
    let semua_npm = [];
    $.each(checkbox_terpilih, function(i, elm) {
        semua_npm.push(elm.value);
    });
    console.log(semua_npm);
    $.ajax({
        url:$(this).attr('action'),
        method:'post',
        data: {npm:semua_npm,  _token: @json(csrf_token())},
        
        success:function(res){
            table.ajax.reload(null, false);
            $("#modaltambahpeserta").modal('hide');
        }
    });
}); });

你的控制器方法应该是

public function peserta_tambah(Request $request, User $user)
    {
       
        Peserta::where('id_asisten', $user->id)->whereIn('id', $request['npm'])->update(['id_asisten' => $user->id]);
        return response()->json(true);
    }