Laravel项目中jQuery AJAX提交失败：saveAudience函数无响应

此处saveAudience函数无法正常工作
点击「保存受众」按钮后，本应完成数据保存或弹出错误提示，但点击后无任何变化。

前端代码 #

function saveAudience() {
    var postData = {
        name: $('input[name="name"]').val(),
    };

    sendHttpRequest('{{ route("save-audience") }}','POST', postData, function (response){
        console.log(response);

        if (response.is_success) {
            alert('Audience saved successfully');
        } else {
            alert('Error: Audience not saved');
        }
    });
}

$('.btn-success').on('click', function() {
    saveAudience();
});

控制器代码 #

我的控制器页面

public function saveAudience(Request $request)
{
    try {
        $validatedData = $request->validate([
            'name' => 'required',
            // 可在此添加其他字段的验证规则
        ]);

        // 开启数据库事务
        DB::beginTransaction();

        // 执行数据库操作
        $audience = new Audience();
        $audience->name = $validatedData['name'];
        // 按需为$audience模型赋值其他字段
        $audience->save();

        // 提交事务
        DB::commit();

        $response = [
            'msg' => 'Audience saved successfully',
            'status' => 'Success',
            'is_success' => true,
            'data' => [],
        ];
    } catch (\Exception $ex) {
        // 异常时回滚事务
        DB::rollback();

        $response = [
            'msg' => 'Error: Audience not saved',
            'status' => 'Failed',
            'is_success' => false,
            'dev_msg' => $ex->getMessage(),
            'data' => [],
        ];
    }

    return $response;
}

问题排查与修复建议 #

1. CSRF令牌缺失：Laravel的POST请求必须携带CSRF令牌，否则会被框架拦截。在postData中添加令牌字段：

   var postData = {
       _token: '{{ csrf_token() }}',
       name: $('input[name="name"]').val(),
   };
   

2. sendHttpRequest函数异常：检查这个自定义请求函数是否正确定义，比如是否存在语法错误、是否正确处理AJAX请求的参数和回调。如果函数未定义，直接用jQuery的$.ajax替代测试：

   $.ajax({
       url: '{{ route("save-audience") }}',
       type: 'POST',
       data: postData,
       success: function(response) {
           console.log(response);
           alert(response.is_success ? '受众保存成功' : '保存失败');
       },
       error: function(xhr) {
           console.log(xhr.responseText);
           alert('请求出错，请检查控制台');
       }
   });
   

3. 事件绑定失效：如果按钮是动态渲染的，直接绑定.btn-success的点击事件会失效，改用事件委托：

   $(document).on('click', '.btn-success', function() {
       saveAudience();
   });
   

4. 控制器返回格式错误：当前控制器直接返回数组，需改为返回JSON格式，否则前端无法解析响应：

   return response()->json($response);
   

5. 查看控制台错误：按下F12打开浏览器开发者工具，检查Console标签是否有JS报错，Network标签是否有请求发送、响应状态码是否正常。

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