Laravel中AJAX请求返回整页代码问题求助

我在Laravel中尝试通过按钮实现数据保存功能，但点击提交按钮后，控制台输出了整页代码，不清楚问题出在哪里。以下是相关代码：

表单及按钮代码 #

<form action="{{ url('sendcom') }}" method="post">
    @csrf
    <input type="text" id="editor" name="Name">
    <button type="submit" id="btn" name="submit" value="Submit">
        submit
    </button>
</form>

AJAX代码 #

<script type="text/javascript">
$(document).ready(function(){
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
  $("#btn").click(function(e){
    e.preventDefault()
    var data = $('#editor').val()
    $.ajax({
      type: "post",
      url: "{{ route('sendcom') }}",
      data: { data: data },
      success: function(res){
            console.log(res);
      }
    });
  });
});
</script>

控制器代码 #

public function sendcom(Request $request)
{
    if($request->ajax()){

        $content = $request->data;

        User::updateOrCreate([
            'contract' => $content
        ]);

        return response(['success' => 'contract save success.']);
    }
}

问题原因及解决办法 #

1. AJAX请求判断失效
   Laravel的$request->ajax()依赖请求头中的X-Requested-With: XMLHttpRequest，部分环境下jQuery不会自动携带这个头，导致判断不成立，控制器无法返回JSON响应，转而输出整页内容。

   • 解决：将$request->ajax()替换为$request->wantsJson()，该方法更可靠；或者在AJAX配置中手动添加请求头：

     $.ajax({
       type: "post",
       url: "{{ route('sendcom') }}",
       headers: {
         'X-Requested-With': 'XMLHttpRequest'
       },
       data: { data: data },
       success: function(res){
             console.log(res);
       }
     });
     

2. updateOrCreate用法错误
   updateOrCreate第一个参数是查询条件，第二个是要创建/更新的字段。当前仅传第一个参数，逻辑存在问题——若找不到contract等于$content的用户，会创建仅含contract字段的用户（需字段允许为空），不符合常规需求。

   • 解决：明确查询条件与更新字段，示例如下：

     // 假设以当前登录用户ID为匹配条件，更新contract字段
     User::updateOrCreate(
         ['id' => auth()->id()], // 查询条件
         ['contract' => $content] // 要更新的字段
     );
     

3. 路由与表单冲突
   表单action和AJAX的url需指向同一POST路由，若AJAX代码因jQuery未加载等原因失效，e.preventDefault()不会生效，表单会默认提交导致页面刷新输出整页。

   • 解决：检查路由文件，确保存在对应POST路由：

     Route::post('/sendcom', [YourController::class, 'sendcom'])->name('sendcom');
     

   同时确认页面已正确加载jQuery，避免AJAX代码无法执行。

4. CSRF验证问题
   需确保页面存在<meta name="csrf-token" content="{{ csrf_token() }}">标签，否则$('meta[name="csrf-token"]').attr('content')取不到值，会触发CSRF验证失败，返回错误页面。

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