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

Layui上传组件如何捕获后端返回的JSON解析异常

老墨姑娘_4730

老墨姑娘_4730

发布时间:2026-07-04 09:08:11

|

297人浏览过

|

来源于php中文网

原创

Layui 上传组件的 error 回调不触发 JSON 解析异常,因其在 done 前内部调用 JSON.parse() 并静默捕获错误、弹出提示,未交由用户 error 处理;须在 done 中通过 xhr.responseText 手动 try/catch 解析。

直接在 error 回调里拿不到 json 解析异常——layui 把这类错误吞掉了,只留一个静默失败或弹出“数据格式错误”,必须从源头拦截。

为什么 error 回调不触发 JSON 解析异常

Layui 的上传组件(layui.upload)内部用 JSON.parse() 尝试解析响应体,但这个过程发生在 done 之前、且独立于 XHR 状态判断。一旦 JSON.parse() 抛错,它会直接调用 that.msg(text['data-format-error']) 并终止流程,根本不会走到你配置的 error 回调函数里。

  • 现象:控制台没报 JS 错误,但上传后无反应 / 弹“PleasereturnJSON data format” / done 不执行
  • 本质:不是网络失败,是解析阶段被 Layui 主动拦截并消化了
  • error 只捕获 XHR 层级失败(如超时、404、500、跨域拒绝),不处理 JSON 解析失败

如何真正捕获并定位 JSON 解析异常

唯一可靠方式是绕过 Layui 默认解析逻辑,在 done 回调中手动接管响应体解析,并用 try/catch 捕获异常。

  • 确保后端返回的是字符串(不是已解析对象),否则 done 接收到的 res 可能已是对象,JSON.parse() 会报错“unexpected token o”
  • 在 done 中先检查 typeof res === 'string',再尝试 JSON.parse(res)
  • 把原始响应体(xhr.responseText)也传进来,用于比对是否被浏览器自动解析过
  • 示例写法:
layui.upload.render({
  elem: '#test',
  url: '/upload/',
  done: function(res, index, upload, xhr) {
    // xhr.responseText 是原始字符串,最可信
    let raw = xhr.responseText?.trim();
    if (!raw) {
      console.error('上传响应为空', { res, xhr });
      return;
    }
    try {
      let data = JSON.parse(raw);
      console.log('解析成功', data);
      // 后续业务逻辑
    } catch (e) {
      console.error('JSON 解析失败', { raw, error: e.message });
      // 这里可上报、提示用户、重试等
    }
  }
});

response 配置项对 JSON 解析异常毫无作用

response 里的 statusName、dataName 等字段,只影响 Layui 在解析成功后的字段提取逻辑,完全不参与 JSON 解析本身。即使你写了 response: { statusName: 'result_code' },只要响应体不是合法 JSON 字符串,照样触发 data-format-error。

dmap-jsapi-skill
dmap-jsapi-skill

DMap GL地图JSAPI(dmapgl)开发指南。用于编写、审查、调试 DMap 地图 API 代码,涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载
  • 别指望靠改 response 来绕过解析失败
  • 它只在 JSON.parse() 成功后才生效;失败了就进不了这一步
  • 如果你的后端返回 HTML 错误页(比如 PHP Fatal Error)、空格+JSON、或带 BOM 的 UTF-8,response 配置完全无效

IE8 下的特殊陷阱:响应体被当作文本而非 JSON

IE8 不支持 XMLHttpRequest.responseType = 'json',且对 Content-Type 极其敏感。哪怕后端返回了标准 JSON 和正确 header,IE8 也可能把整个响应体当字符串传给 done,但又不保证是纯 JSON 字符串(可能含不可见字符、BOM、换行等)。

  • 务必在 IE8 环境下检查 xhr.responseText 的首尾空白和编码
  • 服务端需确保输出无 BOM、无多余空行、Content-Type 明确为 application/json; charset=utf-8
  • 前端建议统一用 JSON.parse(xhr.responseText.trim()),避免空格导致解析失败

真正要捕获 JSON 解析异常,就得放弃依赖 Layui 的默认路径,老老实实自己 parse、自己 catch——它不给你机会,你就得自己造个机会。

热门AI工具

更多
WorkBuddy

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

VibeKnow
VibeKnow Hot

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

DeepSeek

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

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

豆包大模型

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

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2503

2023.08.11

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

6430

2024.03.19

后端的主要工作内容介绍
后端的主要工作内容介绍

后端是应用程序的服务端部分,负责核心任务,如数据库交互、业务逻辑处理和响应客户端请求。想了解更多后端的相关内容,可以阅读本专题下面的文章。

5826

2024.03.19

json数据格式
json数据格式

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

2115

2023.08.07

json是什么
json是什么

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

3202

2023.08.23

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

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

1076

2023.10.13

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

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

3639

2025.09.10

ajax教程
ajax教程

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

2840

2023.06.14

OpenJDK JVM参数怎么调优
OpenJDK JVM参数怎么调优

Java应用运行缓慢,如何调整JVM参数?本专题介绍OpenJDK JVM性能调优的基本流程,涵盖性能指标确认、运行数据采集、内存配置和垃圾回收分析,帮助你先定位瓶颈,再通过对照测试验证效果,避免直接套用参数而影响应用稳定性。

0

2026.10.16

热门下载

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

精品课程

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

共87课时 | 12.9万人学习

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

共89课时 | 11.1万人学习

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

共5课时 | 1.6万人学习

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

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