Laravel 8 使用Ajax实现CRUD时报data_id未定义错误如何解决

AI 小北

2026-10-2

错误原因分析

核心错误是JS代码中直接使用了未声明的data_id变量：你已经通过$(this).attr('data_id')获取到了按钮绑定的ID值，但没有赋值给变量就直接拼接URL了
额外存在2个隐患：1. 循环生成的编辑按钮都用了同一个IDeditBtn，ID在DOM中必须唯一，会导致事件绑定异常；2. 自定义属性不符合HTML规范，建议使用data-前缀的标准写法。

修复步骤

第一步：修改Blade按钮代码

把ID改为class，自定义属性改为标准的data-id写法：

@foreach($admin_quests as $quest)
//some codes
<button class="btn btn-success editBtn" type="button" data-id="{{ $quest->id }}">Edit</button>
@endforeach

第二步：修改JS交互代码

先声明data_id变量，同时把事件绑定的选择器从ID改为class，用jQuery的data()方法更规范的获取自定义属性值：

$('body').on('click','.editBtn', function(){
    $('#addUpdateModal').modal('show');
    $('#modalTitle').html("EDIT QUEST");

    // 先声明变量赋值，再使用
    const data_id = $(this).data('id');
    console.log(data_id);

    $.get("{{ route('admin_quest.index') }}" + '/' + data_id + '/edit', function(data){
        // 后续填充表单的逻辑保持不变即可
    });
});

可选优化：路由生成优化

可以直接把路由模板存在全局变量里，避免Blade渲染JS的兼容问题：

// 在Blade头部先定义全局路由前缀
const adminQuestRoute = "{{ route('admin_quest.index') }}";
// 后续JS里直接使用
$.get(`${adminQuestRoute}/${data_id}/edit`, function(data){...})