Laravel 5.8中JQuery出现Unexpected identifier语法错误的解决

我帮你排查了一下问题，你遇到的Uncaught SyntaxError: Unexpected identifier错误完全是因为JavaScript代码里的语法误用，下面详细说问题和修复方案：

问题重现 #

你在Laravel 5.8开发请假管理功能时，当id="leave_type"下拉框切换，通过AJAX获取请假天数并计算可用天数，但控制台报错指向#available_leave_days = sumAvailableDays;这一行。相关代码如下：

控制器方法 #

public function findLeaveCount(Request $request) {
    $userCompany = Auth::user()->company_id;
    $userEmployee = Auth::user()->employee_id;
    $userId = Auth::user()->id;
    $employeeemptypeid = DB::table('hr_employees')->select('employment_type_id')->where('id', $userId)->first()->employment_type_id;
    $leavetypeid = DB::table('hr_leave_types')->select('id')->where('company_id', $userCompany)->where('id',$request->id)->first()->id;
    $authorizedleavedays = 0;
    $authorizedleavedays = DB::table('hr_leave_type_details')->select('no_of_days')->where('leave_type_id', $leavetypeid)->where('employment_type_id',$employeeemptypeid)->first();
    $availableleavedays = 0;
    $availableleavedays = DB::table('hr_leave_requests')->select(DB::raw("IFNULL(SUM(no_of_days),0) as no_of_days"))->where('employee_id', $userEmployee)->where('leave_type_id', $request->id)->whereYear('created_at', '=', date('Y'))->first();
    return response()->json([
        'authorizedleavedays' => $authorizedleavedays->no_of_days,
        'availableleavedays' => $availableleavedays->no_of_days,
    ]);
}

路由 #

Route::get('get/findLeaveCount','Service\ServiceLeaveRequestsController@findLeaveCount')->name('get.leavecounts.all');

视图（create.blade） #

<div class="col-sm-4">
    <div class="form-group">
        <label>Leave Type:<span style="color:red;">*</span></label>
        <select id="leave_type" class="form-control select2bs4" data-placeholder="Choose Leave Type" tabindex="1" name="leave_type_id" style="width: 100%;">
            <option value="">Select Leave Type</option>
            @if($leavetypes->count() > 0)
                @foreach($leavetypes as $leavetype)
                    <option value="{{$leavetype->id}}">{{$leavetype->leave_type_name}}</option>
                @endforeach
            @endif
        </select>
    </div>
</div>
<input type="hidden" id="available_leave_daysx" class="form-control" value="0" >
<div class="col-sm-4">
    <div class="form-group">
        <label>Authorized Leave Days:</label>
        <input id="authorized_leave_days" type="number" class="form-control" value="0" style="width: 100%;" disabled>
    </div>
</div>
<div class="col-sm-4">
    <div class="form-group">
        <label>Available Leave Days:</label>
        <input id="available_leave_days" type="number" class="form-control" value="0" style="width: 100%;" disabled>
    </div>
</div>

触发的JQuery代码 #

$(document).ready(function() {
    $(document).on('change', '#leave_type', function() {
        var air_id = $(this).val();
        var a = $(this).parent();
        var op = "";
        $.ajax({
            type: 'get',
            url: '{{ route('get.leavecounts.all') }}',
            data: { 'id': air_id },
            dataType: 'json',
            success: function(data) {
                console.log(data.authorizedleavedays);
                console.log(data.availableleavedays);
                $('#authorized_leave_days').val(data.authorizedleavedays);
                $('#available_leave_daysx').val(data.availableleavedays);
                let authorizedLeaveDays = $('#authorized_leave_days').val(data.authorizedleavedays);
                let availableLeaveDays = $('#available_leave_daysx').val(data.availableleavedays);
                let sumAvailableDays = parseInt(authorizedLeaveDays) - parseInt(availableLeaveDays);
                #available_leave_days = sumAvailableDays
            },
            error:function(){}
        });
    });
});

错误原因&修复方案 #

1. 核心语法错误：错误的DOM赋值方式 #

你写的#available_leave_days = sumAvailableDays完全是错误的：

• 在JavaScript里，#不是注释符号（那是PHP的注释），也不能直接用#id来指代DOM元素
• 要给输入框设置值，必须用jQuery的$('#id').val(值)方法

所以这一行必须改成：

$('#available_leave_days').val(sumAvailableDays);

2. 变量赋值的隐藏问题 #

你现在的authorizedLeaveDays和availableLeaveDays变量存的是jQuery对象，不是你需要的数值！因为$('#authorized_leave_days').val(data.authorizedleavedays)这个操作返回的是jQuery对象（支持链式调用），不是输入框的当前值。

更高效的做法是直接用AJAX返回的data里的数值来计算，不用绕一圈从DOM取值：

修正后的完整jQuery代码 #

$(document).ready(function() {
    $(document).on('change', '#leave_type', function() {
        var air_id = $(this).val();
        // 去掉没用的变量a和op
        $.ajax({
            type: 'get',
            url: '{{ route('get.leavecounts.all') }}',
            data: { 'id': air_id },
            dataType: 'json',
            success: function(data) {
                console.log(data.authorizedleavedays);
                console.log(data.availableleavedays);
                
                // 先把接口返回的数值转成整数，防止NaN
                const authorizedDays = parseInt(data.authorizedleavedays) || 0;
                const usedDays = parseInt(data.availableleavedays) || 0;
                // 计算可用天数
                const availableDays = authorizedDays - usedDays;
                
                // 设置各个输入框的值
                $('#authorized_leave_days').val(authorizedDays);
                $('#available_leave_daysx').val(usedDays);
                $('#available_leave_days').val(availableDays);
            },
            error:function(){}
        });
    });
});

3. 控制器代码的优化建议（可选） #

你的控制器里如果查询不到记录，first()会返回null，这时候调用->no_of_days会抛出错误。可以用Laravel的optional()辅助函数来避免：

public function findLeaveCount(Request $request) {
    $userCompany = Auth::user()->company_id;
    $userEmployee = Auth::user()->employee_id;
    $userId = Auth::user()->id;
    
    // 这里也要加optional，防止找不到员工记录
    $employeeemptypeid = optional(DB::table('hr_employees')->select('employment_type_id')->where('id', $userId)->first())->employment_type_id ?? 0;
    
    $leavetypeid = optional(DB::table('hr_leave_types')->select('id')->where('company_id', $userCompany)->where('id',$request->id)->first())->id ?? 0;
    
    $authorizedleavedays = DB::table('hr_leave_type_details')
        ->select('no_of_days')
        ->where('leave_type_id', $leavetypeid)
        ->where('employment_type_id',$employeeemptypeid)
        ->first();
        
    $availableleavedays = DB::table('hr_leave_requests')
        ->select(DB::raw("IFNULL(SUM(no_of_days),0) as no_of_days"))
        ->where('employee_id', $userEmployee)
        ->where('leave_type_id', $request->id)
        ->whereYear('created_at', '=', date('Y'))
        ->first();
        
    return response()->json([
        'authorizedleavedays' => optional($authorizedleavedays)->no_of_days ?? 0,
        'availableleavedays' => optional($availableleavedays)->no_of_days ?? 0,
    ]);
}

这样即使查询不到对应记录，接口也会返回0，避免前端得到undefined导致计算出错。

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