Laravel 10中JS填充更新表单时出现Unexpected token ')'语法错误

1. 核心语法错误原因 #

你代码中的"是HTML实体转义的双引号，在<script>标签内浏览器不会自动解析这些实体，直接导致JS字符串引号未正确闭合，引发Unexpected token ')'错误。

2. 分步修复方案 #

修复引号转义问题 #

将代码中所有"替换为单引号或直接使用双引号，同时确保Blade路由语法正确解析：

// 原错误代码
$.get("{{ route('petugas.index') }}" + '/' + petugas_id + '/edit', function(data) {

// 修改后（用单引号包裹Blade路由，避免冲突）
$.get('{{ route("petugas.index") }}/' + petugas_id + '/edit', function(data) {

或者使用Blade的@json函数确保URL被安全转义：

$.get(@json(route('petugas.index')) + '/' + petugas_id + '/edit', function(data) {

处理关联数据空值风险 #

若存在用户未关联petugasDetail或userKontak的情况，直接访问子属性会引发新的错误，需添加空值判断：

// 处理petugasDetail空值
$('#edit_nip').val(data.petugasDetail?.nip || '');
$('#edit_nuptk').val(data.petugasDetail?.nuptk || '');
// 其他petugasDetail字段同理

// 处理userKontak空值
$('#edit_no_handphone').val(data.userKontak?.no_handphone || '');
$('#edit_facebook').val(data.userKontak?.facebook || '');
// 其他userKontak字段同理

// 处理roles空值
$('#edit_role').val(data.roles?.length > 0 ? data.roles[0].id : '');

验证控制器JSON响应 #

在浏览器开发者工具的Network标签中查看edit接口的响应，确认返回的JSON结构完整、无语法错误（比如多余逗号）。

完整修改后的JS代码 #

$('body').on('click', '#editData', function() {
    var petugas_id = $(this).data('id');
    var baseUrl = '{{ route("petugas.index") }}';
    
    $.get(baseUrl + '/' + petugas_id + '/edit', function(data) {
        $('#modal-edit').modal('show');
        setTimeout(function() {
            $('#name').focus();
        }, 500);
        $('.modal-title').html("Ubah Data Petugas");
        $('#updateBtn').removeAttr('disabled').html("Simpan");
        
        $('#edit_petugas_id').val(data.id);
        $('#edit_name').val(data.name);
        $('#edit_username').val(data.username);
        $('#edit_email').val(data.email);
        
        // 处理petugasDetail空值
        $('#edit_nip').val(data.petugasDetail?.nip || '');
        $('#edit_nuptk').val(data.petugasDetail?.nuptk || '');
        $('#edit_nik').val(data.petugasDetail?.nik || '');
        $('#edit_jenis_kelamin').val(data.petugasDetail?.jenis_kelamin || '');
        $('#edit_tempat_lahir').val(data.petugasDetail?.tempat_lahir || '');
        $('#edit_tanggal_lahir').val(data.petugasDetail?.tanggal_lahir || '');
        $('#edit_status').val(data.petugasDetail?.status || '');
        $('#edit_alamat').val(data.petugasDetail?.alamat || '');
        $('#edit_pendidikan_terakhir').val(data.petugasDetail?.pendidikan_terakhir || '');
        
        // 处理userKontak空值
        $('#edit_no_handphone').val(data.userKontak?.no_handphone || '');
        $('#edit_facebook').val(data.userKontak?.facebook || '');
        $('#edit_instagram').val(data.userKontak?.instagram || '');
        $('#edit_twitter').val(data.userKontak?.twitter || '');
        
        $('#edit_foto').val(data.foto);
        // 处理roles空值
        $('#edit_role').val(data.roles?.length > 0 ? data.roles[0].id : '');
    });
});

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