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

冬枫同学_4904

冬枫同学_4904

2026-10-02

315人浏览

原创

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 比 {} 更能暴露逻辑分支问题。真正难缠的从来不是语法错误,而是你以为它是个字符串,其实它早就不是了。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

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

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

2023.08.07

2015

5

json是什么
json是什么

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

2023.08.23

2882

1

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

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

2023.10.13

976

3

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

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

2025.09.10

3259

7

ajax教程
ajax教程

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

2023.06.14

2540

4

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

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

2023.08.31

340

5

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

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

2023.11.15

2373

5

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

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

2024.09.24

1141

6

热门下载

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

精品课程

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

共87课时 | 12.7万人学习

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

共89课时 | 10.9万人学习

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

共5课时 | 1.6万人学习