Laravel 中使用 AJAX 提交表单时，若控制器返回普通响应而非标准 JSON，浏览器会默认接收并解析整个 HTML 页面内容，导致 console.log(res) 输出整页源码。本文详解问题根源及正确返回 JSON 的实践方法。
laravel 中使用 ajax 提交表单时，若控制器返回普通响应而非标准 json，浏览器会默认接收并解析整个 html 页面内容，导致 console.log(res) 输出整页源码。本文详解问题根源及正确返回 json 的实践方法。
你遇到的问题非常典型：点击按钮后，控制台打印出的不是预期的 { "success": "contract save success." }，而是整张 HTML 页面的源代码（例如包含 <html>、<head>、@yield('content') 等）。根本原因在于 AJAX 期望接收 JSON 格式响应，但控制器实际返回的是一个未序列化的 Laravel 响应对象。
在你的控制器中：
return response(['success' => 'contract save success.']);
这行代码创建了一个 Illuminate\Http\Response 实例，其默认 Content-Type 是 text/html（尤其当未显式指定且响应体为数组时），Laravel 会尝试将其渲染为视图或重定向——最终导致整个页面被当作响应体返回。
✅ 正确做法是明确返回 JSON 响应，推荐以下两种方式（任选其一）：
wechat-article-extraction-mp-weixin-qq-com news-webpage-cleaning blog-post-parsing metadata-extraction-title-author-date multiple-output-formats-markdown-json-plain-text batch-processing-support
下载
基于三引擎设计，从微信文章、新闻和博客网页提取干净内容，支持标题作者日期元数据，多格式和批量处理。
✅ 推荐方案一：使用 response()->json()（最规范）
public function sendcom(Request $request)
{
if ($request->ajax()) {
$content = $request->input('data');
User::updateOrCreate([
'contract' => $content
]);
return response()->json([
'success' => true,
'message' => 'Contract saved successfully.'
], 200);
}
return response()->json(['error' => 'Invalid request'], 400);
}✅ 推荐方案二：使用 json() 辅助函数（简洁等效）
return json(['success' => true, 'message' => 'Contract saved successfully.']);
? 注意：json() 是 Laravel 9+ 引入的全局辅助函数，底层即调用 response()->json()，语义更清晰。
? 前端 AJAX 同步调整（增强健壮性）
同时建议优化前端代码，添加错误处理与状态判断：
$("#btn").click(function(e) {
e.preventDefault();
const data = $('#editor').val().trim();
if (!data) {
alert('Please enter content.');
return;
}
$.ajax({
type: "POST",
url: "{{ route('sendcom') }}",
data: { data: data },
dataType: "json", // ? 显式声明期望 JSON 响应（关键！）
success: function(res) {
console.log(res.message); // ✅ 此时 res 是已解析的 JS 对象
alert(res.message);
},
error: function(xhr) {
console.error('AJAX Error:', xhr.responseJSON?.message || xhr.statusText);
alert('Save failed. Please try again.');
}
});
});⚠️ 关键注意事项
- ❌ 不要使用 json_encode() 直接返回字符串（如 return json_encode([...])），这会丢失 HTTP 状态码和 Content-Type: application/json 头，可能导致前端解析失败；
- ✅ 始终设置 dataType: "json"（jQuery）或 headers: { 'Accept': 'application/json' }（原生 Fetch），确保请求头明确告知后端“我要 JSON”；
- ✅ 控制器中建议统一校验 $request->wantsJson() 或 $request->expectsJson() 替代仅依赖 $request->ajax()（后者在某些代理/跨域场景下可能失效）；
- ✅ 表单 action 属性（{{ url('sendcom') }}）与 AJAX url（{{ route('sendcom') }}）应保持一致，避免路由不匹配引发 404 或回退到页面刷新。
遵循以上实践，你的 AJAX 请求将稳定返回结构化 JSON 数据，console.log(res) 将输出可直接操作的对象，彻底告别“整页源码轰炸控制台”的困扰。
