讲师中心 微信公众号
AI工具推荐 视频效率加速

layui怎么处理JSON解析报错SyntaxError: Unexpected token < in JSON

冬枫同学_4904

冬枫同学_4904

发布时间:2026-10-02 10:26:48

|

315人浏览过

|

来源于php中文网

原创

done回调中JSON.parse失败需用xhr.responseText获取原始响应,trim后手动解析并try/catch捕获错误;Unexpected token u多因传入undefined,Unexpected end多因空字符串。

layui怎么处理json解析报错syntaxerror: unexpected token < in json

layui.upload.render 的 done 回调里 JSON.parse 失败怎么办

layui 本身不替你解析响应体,done 回调拿到的 res 是 layui 尝试 JSON.parse() 后的结果——如果失败,它会直接跳过 done,走 error 回调,但不会告诉你原始响应是什么。所以真要排查,得绕过 layui 的自动解析,自己抓原始字符串。

关键点:必须用 xhr.responseText,它是最原始、未被篡改的响应体字符串,比 res 可靠得多。

  • 始终先 trim() 再判断是否为空:if (!xhr.responseText?.trim())
  • 不要依赖 res 是否为 object 来判断成功;它可能是 {} 或 undefined,毫无意义
  • 在 try/catch 里手动 JSON.parse(xhr.responseText),捕获具体错误类型
  • response 配置项(如 statusName)只影响解析成功后的字段提取,对 SyntaxError 完全无效

Unexpected token u / Unexpected end of JSON input 怎么快速定位

这两个报错不是后端问题,而是你传给 JSON.parse() 的东西根本不是字符串。

Unexpected token u 几乎等于你传了 undefined;Unexpected end of JSON input 基本是空字符串、全是空白或 null 字符串化后的结果。

  • 检查来源:是 xhr.responseText?还是 localStorage.getItem('key')?或是 fetch().then(r => r.json())?不同来源的“空”表现不同
  • 打印 typeof raw 和 raw 本身,别只看 console.log(raw)——浏览器控制台对 undefined 和空字符串显示太相似
  • 后端返回 HTTP 200 但 body 为空,前端无脑 res.json() 就会触发 Unexpected end
  • Node.js 里读文件没加 encoding: 'utf8',fs.readFileSync() 返回 Buffer,toString() 前没处理好也容易出 token u

fetch + response.json() 报 Unexpected token < 怎么办

这个 < 不是 JSON 错误,是 HTML。说明你请求的 URL 实际返回了一个 HTML 页面(比如 404 页面、登录跳转页、Nginx 默认页),而不是 JSON。

Token Usage Monitor
Token Usage Monitor

监控并显示AI模型的Token使用指标。适用于需要追踪Token消耗速率、查看历史使用数据或获取高额使用警报时。

下载

典型场景:API 路径写错、代理没配好、后端路由未匹配,或者静态资源路径和 API 路径冲突(例如请求 /api/user 却返回了 index.html)。

  • 先在浏览器地址栏直接访问那个 URL,看返回的是 JSON 还是 HTML
  • 检查 Network 面板里该请求的 Response Headers,确认 Content-Type 是 application/json,不是 text/html
  • 避免在 fetch().then(r => r.json()) 前不做 r.ok 或 r.status 判断
  • 更稳妥的做法:先 r.text(),再手动 JSON.parse(),这样你能看到原始 HTML 内容,立刻知道哪错了

封装一个防崩的 JSON 解析工具函数

别每次都在业务里写重复的 try/catch,抽成函数更可控。

function safeJsonParse(str, fallback = null) {
  if (typeof str !== 'string' || !str.trim()) return fallback;
  try {
    return JSON.parse(str);
  } catch (e) {
    console.warn('safeJsonParse failed:', { raw: str, error: e.message });
    return fallback;
  }
}

用法示例:

  • Layui upload:const data = safeJsonParse(xhr.responseText, {});
  • fetch 场景:const json = safeJsonParse(await res.text(), { code: -1 });
  • localStorage:const cfg = safeJsonParse(localStorage.getItem('config'), {});

注意 fallback 值类型要和业务预期一致;传 null 比 {} 更能暴露逻辑分支问题。真正难缠的从来不是语法错误,而是你以为它是个字符串,其实它早就不是了。

热门AI工具

更多
DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

1995

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2822

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

976

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

3179

2025.09.10

ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2480

2023.06.14

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

340

2023.08.31

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2313

2023.11.15

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1141

2024.09.24

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

0

2026.09.30

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 12.6万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 10.9万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn