Laravel中AJAX提交多选课程无法更新用户关联课程求助

我尝试使用AJAX为用户添加多门课程，点击提交按钮后，用户姓名、邮箱等信息均可正常更新，但关联的课程未更新，请求帮助。

Blade视图代码 #

<input type="hidden" name="user_id" id="user_id" value="{{$user_details->id}}">
@csrf
<div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control"  id="name"  name="name" value="{{$user_details->name}}">
</div>
<div class="form-group">
    <label for="email">Email</label>
    <input type="text" class="form-control"  id="email"  name="email" value="{{$user_details->email}}">
</div>
<div class="form-group">
    <label for="courses_id">Courses</label>
    @php
        $all_courses = $user_details->courses_id;
    @endphp
    <select name="courses_id[]" multiple id="course" class="form-control nice-select wide">
    @foreach($courses as $data)
    @if($all_courses)
        <option @if(in_array($data->id,$all_courses)) selected @endif value="{{$data->id}}">{{$data->title}}</option>
    @else
        <option value="{{$data->id}}">{{$data->title}}</option>
    @endif
    @endforeach
    </select>
</div>
<button type="submit" class="btn btn-primary mt-4 pr-4 pl-4">{{__('Update User')}}</button>
</form>

<script>
    $(document).ready(function() {

        if($('.nice-select').length > 0){
            $('.nice-select').niceSelect();
        }

        $(document).on('change','select[name="courses_id[]"]',function (e) {
            e.preventDefault();
            var selectedId = $(this).val();
            $.ajax({
                url : "{{route('admin.user.course.by.slug')}}",
                type: "POST",
                data: {
                    _token : "{{csrf_token()}}",
                    id: selectedId
                },
                success:function (data) {
                    $('#course').html('');
                    $.each(data,function (index,value) {
                        $('#course').append('<option '+selected+' value="'+value.id+'">'+value.title+'</option>');
                        $('.nice-select').niceSelect('update');
                    });
                }
            });
        });
    } );
</script>

控制器代码 #

namespace App\Http\Controllers;

use App\Courses;
use App\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Hash;

class UserController extends Controller
{
    public function edit($id)
    {
        $user_details = User::find($id);
        $courses = Courses::where(['status'=> 'publish'])->get();

        return view('backend.user.edit-user')->with([ 'user_details' => $user_details, 'courses' => $courses]);
    }

    public function user_update(Request $request)
    {
        $this->validate($request, [
            'name' => 'required|string|max:191',
            'email' => 'required|string|max:191',
            'courses_id' => 'nullable',
        ],[
            'name.required' => __('Name is required'),
            'email.required' => __('Email is required'),
        ]);

        User::find($request->user_id)->update([
            'name' => $request->name,
            'email' => $request->email,
            'courses_id' => serialize($request->courses_id),
        ]);

        return redirect()->back()->with(['msg' => __('User Profile Updated Successfully..'), 'type' => 'success']);
    }

    public function course_by_slug(Request $request){
        $all_courses = Courses::where(['status' => 'publish'])->get();
        return response()->json($all_courses);
    }
}

路由代码 #

Route::prefix('user')->middleware(['adminPermissionCheck:Users Manage'])->group(function () {
Route::get('/edit/{id}', 'UserController@edit')->name('admin.user.edit');
Route::post('/update', 'UserController@user_update')->name('admin.user.update');
Route::post('/course-by-slug', 'UserController@course_by_slug')->name('admin.user.course.by.slug');
});

问题排查与解决方案 #

1. 修复编辑页面课程选中状态判断错误 #

Blade视图中直接读取了数据库里序列化后的字符串作为$all_courses，但in_array需要数组才能正确匹配，导致编辑页面无法显示用户已选课程，提交时可能因选中状态丢失无数据传递。

修改Blade中的@php代码：

@php
    // 反序列化存储的课程ID数组，为空时返回空数组
    $all_courses = $user_details->courses_id ? unserialize($user_details->courses_id) : [];
@endphp

2. 移除无意义的AJAX事件 #

绑定的select change事件只是重复获取所有已发布课程，且回调中selected变量未定义，导致重新渲染后选中状态丢失，直接删除这段代码即可：

删除以下脚本片段：

$(document).on('change','select[name="courses_id[]"]',function (e) {
    e.preventDefault();
    var selectedId = $(this).val();
    $.ajax({
        url : "{{route('admin.user.course.by.slug')}}",
        type: "POST",
        data: {
            _token : "{{csrf_token()}}",
            id: selectedId
        },
        success:function (data) {
            $('#course').html('');
            $.each(data,function (index,value) {
                $('#course').append('<option '+selected+' value="'+value.id+'">'+value.title+'</option>');
                $('.nice-select').niceSelect('update');
            });
        }
    });
});

3. 验证表单提交数据 #

在控制器user_update方法中添加调试代码，确认是否接收到课程ID数组：

// 在update操作前添加
dd($request->courses_id);

如果输出为null，检查nice-select插件是否同步了原select的选中状态，或禁用插件用原生select测试提交情况。

4. 检查数据库字段类型 #

确保users表的courses_id字段类型为text或longtext，序列化后的数组可能超过varchar长度限制，导致存储截断、后续反序列化失败。

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