使用spatie/laravel-google-calendar创建谷歌日历事件遇Ajax无响应问题排查

我尝试用Laravel和Ajax创建谷歌日历事件，但修改起止日期后完全没反应，相关代码和问题如下：

问题描述 #

控制器的store方法负责事件创建，修改表单起止日期后，希望通过Ajax把数据发去服务器创建事件，但没达到预期效果。

路由（web.php） #

Route::resource('event',EventController::class);

EventController代码 #

public function store(Request $request)
{
 
    if ($request->isMethod('post')) {
        $event = $this->createEventInstance($request);
        
        // 执行其他必要操作
        
        return;
    }

}
  
private function createEventInstance(Request $request)
{
    $startTime = Carbon::parse($request->input('effective_period_start_date'));
    $endTime = Carbon::parse($request->input('effective_period_end_date'));

    return new Event([
        'startDateTime' => $startTime,
        'endDateTime' => $endTime
    ]);
}

Blade代码 #

<div class="col-sm-4">
    <div class="mb-3">
        <label class="form-label">Effective Period Start date</label>
        <input type="date" class="form-control effective_period_start_date" name="effective_period_start_date" value="{{@$obj->effective_period_start_date}}" {{ $disabledfield }}>
    </div>
</div>
<div class="col-sm-4">
    <div class="mb-3">
        <label class="form-label">Effective Period End date</label>
        <input type="date" class="form-control effective_period_end_date" name="effective_period_end_date" value="{{@$obj->effective_period_end_date }}" {{ $disabledfield }}>
    </div>
</div>

<script>
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
var url = '/event';
$(document).ready(function() {
    $('.effective_period_start_date, .effective_period_end_date').on('change', function() {
        var startDate = $('.effective_period_start_date').val();
        var endDate = $('.effective_period_end_date').val();

        if (startDate && endDate) {
            $.ajax({
                type: 'POST',
                url: url,
                data: {
                    effective_period_start_date: startDate,
                    effective_period_end_date: endDate
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    console.log('Event created:', response);
                },
                error: function(xhr, status, error) {
                    console.error('Error:', error);
                }
            });
        }
    });
});
</script>

核心问题 #

• 使用控制器store方法创建事件
• 私有方法createEventInstance准备事件数据
• 修改起止日期时通过Ajax发送数据到服务器

预期与实际 #

• 预期：事件成功创建，能收到成功响应
• 实际：事件未创建，也未收到任何响应

疑问 #

1. 问题出在哪？
2. Ajax请求或控制器逻辑有没有错误？
3. 需要检查哪些Laravel路由或配置？

1. 控制器逻辑核心问题 #

• 未持久化事件：createEventInstance仅创建了Event模型实例，但未调用save()方法将数据存入数据库（或同步到谷歌日历），事件根本没被创建。
• 无响应返回：store方法最后仅return;，未返回任何JSON响应，前端Ajax的success回调无法获取反馈，自然看不到响应。

修复后的控制器代码：

public function store(Request $request)
{
    // resource路由的store本身只处理POST请求，无需额外判断
    $event = $this->createEventInstance($request);
    $event->save(); // 保存到数据库
    
    // 在这里添加谷歌日历同步逻辑（比如调用谷歌API创建日历事件）
    
    return response()->json([
        'status' => 'success',
        'message' => 'Event created successfully',
        'event' => $event
    ]);
}
  
private function createEventInstance(Request $request)
{
    $startTime = Carbon::parse($request->input('effective_period_start_date'));
    $endTime = Carbon::parse($request->input('effective_period_end_date'));

    return new Event([
        'startDateTime' => $startTime,
        'endDateTime' => $endTime
    ]);
}

2. Ajax请求潜在问题 #

• CSRF Token传递优化：Laravel默认接受_token参数在请求数据中，可将Token加到data里，和headers方式二选一即可：

data: {
    _token: CSRF_TOKEN,
    effective_period_start_date: startDate,
    effective_period_end_date: endDate
},
// 可去掉headers里的Token配置，或保留均可

• URL正确性验证：执行php artisan route:list查看event.store的实际URL，确认是否有前缀（如/admin/event）导致404。
• 输入框状态检查：确认{{ $disabledfield }}未让输入框处于disabled状态——禁用的输入框无法触发change事件，也无法获取值，会导致Ajax不执行。

3. 路由与配置检查 #

• Resource路由验证：运行php artisan route:list，确认POST /event对应EventController@store，无路由冲突。
• CSRF中间件检查：确保路由在web中间件组内（默认resource路由都在），web中间件组包含VerifyCsrfToken，若手动排除/event路由会导致CSRF验证失败。
• 日志排查：查看storage/logs/laravel.log，里面会记录模型字段不匹配、Carbon解析错误、谷歌API调用失败等具体报错信息。

4. 前端调试建议 #

打开浏览器开发者工具（F12）切换到Network标签，修改日期后查看：

• 是否有POST请求发送
• 请求状态码：403（CSRF验证失败）、404（URL错误）、500（服务器内部错误），对应排查即可

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