SyntaxError: Unexpected end of JSON input解决方法和思路

最新推荐文章于 2025-10-01 22:51:57 发布
原创 最新推荐文章于 2025-10-01 22:51:57 发布 · 7.4w 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文记录了解决前后台交互中出现的“SyntaxError:Unexpected end of JSON input”错误的过程，通过调整后端Controller的返回类型，从void改为DTO，成功解决了前端JavaScript调用ajax时的JSON解析错误。
部署运行你感兴趣的模型镜像

最近在写一个前后台交互的需求，前台点击编辑按钮，直接报错：SyntaxError: Unexpected end of JSON input。

网上查了下基本都是 一般**“ ”（双引号）， ‘ ’（单引号） ，{}，[]**未成对输入时导致报错。但是我这边没法解决。

重新检查了JavaScript的代码，具体代码如下

						case 'edit':
                            rdata = {
                                type: data.type,
                                value: data.value
                            };
                            pageAction.editNbrList(rdata, function () {
                                this.pageGrid.saveRow(rowid, {trigger: false});
                            }.bind(this));
                            break;`

本地debug开始调试，发现后台controller也可以正常跑调数据库查数据；前台JavaScript调试也可以正常调ajax将dto中的对象返回json串。

最终决定从请求的入口controller层重新查找原因，由于新增操作返回类型是dto对象，可以正常实现，而修改、删除操作是用的void返回类型，修改下controller的方法入口，将返回类型修改为对应的dto，return出该请求体的dto，重新测试下，发现不报错了。

算是提供一种解决该问题的思路吧，分享下

您可能感兴趣的与本文相关的镜像

Qwen-Image

Qwen-Image

图片生成
Qwen

Qwen-Image是阿里云通义千问团队于2025年8月发布的亿参数图像生成基础模型，其最大亮点是强大的复杂文本渲染和精确图像编辑能力，能够生成包含多行、段落级中英文文本的高保真图像

微信小程序 - 页面跳转传参 JSON.parse 解析失败报错（SyntaxError: Unexpected end of JSON input）解决方案
🏆 前端领域优质创作者
05-16 7108
报错信息 报错原因 特殊字符：英文（半角）状态的单引号‘双引号"斜杠\反斜杠/and符号&大于号>小于号<空格等。 常见的场景是页面携带的参数中含有特殊字符（见上方）， 通过JSON.parse接收解析时，就会出现的报错。 例如下面这个要携带的数据，它就含有上述所说的特殊字符“&”，毫无疑问转义失败。 varparam={ name:"&我是特殊字符&" } 解决方案 核心思路：JSON
解决报错SyntaxError：Unexpected end of JSON input
m0_67391377的博客
03-07 7982
需求分析 跳转页面时，需要将对象类型的数据详情一起传过去，另一个页面来显示。 // 跳转核销详情界面 jumpVerifyDetail: function (data={}) { if(!this.judgeObjIsEmpty(data)){ const newData = JSON.stringify(data); wx.navigateTo({ url: `./verifyDetail/index?newData=` + newData,
JSON转换时中途意外停止出现“SyntaxError：Unexpected end of JSON input”
徐飞的博客
06-09 1304
JSON转换时中途意外停止出现“SyntaxError：Unexpected end of JSON input” 今天在开发微信小程序需求的时候运用JSON进行页面之间的传值，发现传的值在转化的时候意外停止并报错“SyntaxError：Unexpected end of JSON input”。然后我发现传的一个数据中含有标签等特殊字符，如下图：...
极路由 极1s J1S hc5661 刷入OpenWRT并设置同网段子路由
最新发布
SimonLiu的博客
10-01 965
本文分享了将极路由1S（HC5661）刷入OpenWRT并设置为AP模式的详细教程。首先从OpenWRT官网下载对应固件，通过Breed刷机。然后设置中文界面、更新软件包并解决可能的报错。重点介绍了将路由器配置为AP模式的步骤：修改LAN口IP为与主路由同网段、关闭DHCP服务，最后将主路由LAN口接入极路由LAN口。这样极路由仅作为交换机使用，所有设备由主路由统一分配IP，实现网络设备的高效利用。
syntaxError:unexpected end of JsoN input 如何解决
qq_33240556的博客
03-18 1万+
当出现 “syntaxError: unexpected end of JSON input” 错误时，通常是因为在解析JSON字符串时，JSON格式不完整或有错误导致JavaScript的JSON.parse()方法无法正确解析。如果是从服务器API获取的数据，请确认API返回的是正确的JSON格式，并且没有被截断。确保你正在尝试解析的是一个完整的、有效的JSON对象或数组。如果你的JSON字符串结尾存在非JSON格式的额外字符，需要在解析前清理掉这些字符。
uniapp 开发出现这个 Error in onLoad hook: “SyntaxError: Unexpected end of JSON input“
古猿写代码
03-15 1635
uniapp 开发出现这个 Error in onLoad hook: “SyntaxError: Unexpected end of JSON input“,这个问题如何解决。
微信小程序报SyntaxError: Unexpected end of JSON input
maple_and_sakura的博客
12-08 1141
微信小程序报SyntaxError: Unexpected end of JSON input 这个错误是因为在路由传参的时候 微信小程序解析出来没有正确识别的字符 H5端可以正确使用 解决方法 let obj=[{a:1}] let cn=encodeURIComponent(JSON.stringify(obj)) uni.navigateTo({ url:‘/pages/index/index?cn=’+cn }) 在index页面里面 onLoad(options){ let c
HarmonyOS预览功能报错：[webpack-cli] SyntaxError: Unexpected end of JSON input
songqindong
03-12 1356
harmonyos预览功能报错：[webpack-cli] SyntaxError: Unexpected end of JSON input
SyntaxError: Unexpected end of JSON input
wuyujin1997的博客
04-23 2万+
cause 以下为前端AJAX代码，用于删除后台用户数据。 $.ajax({ method: "POST", url: "/DeleteUser", data: { id: row.id }, success: function(data, textStatus, jqXHR) { console.log("删除成功"); ...
解决 SyntaxError：Unexpected end of JSON input 或 Unexpected token u in JSON at position 0 问题
热门推荐
weixin_46258341的博客
07-19 3万+
2、JSON 数据格式要求。
uniapp报错：SyntaxError: Unexpected end of JSON input
qq_53742811的博客
11-02 1122
经过JSON.stringify()方法转换过的对象或数组再使用encodeURIComponent()方法再次编码，使用时先通过decodeURIComponent解码然后再使用JSON.parse()方法转化成json类型的对象或者数组
JSON.parse 执行出错：SyntaxError: Unexpected end of JSON input
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
11-08 3476
错误通常表示 JSON 字符串在解析时出现了不完整的情况。这可能是由于 JSON 数据未完全加载、缺少必要的符号、空字符串或无效的数据源造成的。在实际开发中，避免此类错误的最佳实践包括：确保数据完整性、验证 JSON 格式、增加异常处理机制以及检查数据来源。
VM2655:1 Uncaught SyntaxError: Unexpected end of JSON input错误分析解决
weixin_42279822的博客
04-12 9445
这种错误可能是由于后台返回的 JSON 数据不完整，例如在传输过程中发生了中断或截断，导致前端接收到了不完整的 JSON 数据。解决方法通常是确保后台在传输 JSON 数据时完整地发送所有数据，并且前端在接收 JSON 数据时进行错误处理，以确保接收到的数据是有效的 JSON 格式。前端错误处理：在前端接收 JSON 数据时，进行错误处理，包括检查接收到的数据是否为空或不完整。后台传输 JSON 数据时确保完整性：确保后台在传输 JSON 数据时，将所有数据完整地发送到前端。符号和对应的结束符号。
Uncaught SyntaxError: Unexpected end of input
aoyanhui2930的博客
09-13 323
之前有时候遇到这个错误回去找input，但是你会发现这个跟input没半毛钱关系，在代码众多的情况下，很难注意到真正的错误地方。 This particular error is one annoying fact about V8. In most cases your JavaScript is broken in some way. For example missing a}...
uniapp SyntaxError: Unexpected end of JSON input
tengyuxin的博客
04-07 1037
报这个错误的原因是，在将Object 转成json时，再转成Object存在非json格式的特殊字符，如&、？，解决的办法是将转成json的字符再用encodeURIComponent编码一下，将特殊字符替换，之后再替换回来。
SyntaxError: Unexpected end of JSON input while parsing near '...ttachment":false,"tar'
吴晓斌的博客
10-25 730
npm config set registry http://registry.cnpmjs.org
Error in created hook: "SyntaxError: Unexpected end of JSON input
08-29
<think>我们正在解决的是“SyntaxError: Unexpected end of JSON input”错误。这个错误通常发生在使用`JSON.parse()`解析一个非完整或无效的JSON字符串时。根据引用[1][2][3][4][5]，我们可以总结原因和解决方法如下： ### 错误原因 1. **JSON字符串不完整**：可能由于网络传输中断、数据截断或字符串拼接错误导致JSON字符串不完整[^1][^2]。 2. **未正确编码特殊字符**：如果JSON字符串中包含特殊字符（如`&`, `=`等），在URL传递过程中可能被截断或修改，导致解析失败[^2][^4][^5]。 3. **空值或未定义数据**：尝试解析一个空字符串、`undefined`或`null`（非JSON格式）[^1][^3]。 4. **数据源本身有问题**：从服务器或本地存储获取的JSON数据本身不完整[^1][^3]。 ### 解决方案 #### 1. **检查JSON字符串的完整性** - 在解析前打印或记录JSON字符串，确保它是完整的[^1][^3]。 - 示例调试代码： ```javascript console.log("原始字符串:", jsonString); // 检查是否完整 try { const data = JSON.parse(jsonString); } catch (e) { console.error("解析失败:", e); } ``` #### 2. **正确编码URL参数** - 在通过URL传递JSON字符串时，使用`encodeURIComponent()`编码，接收时使用`decodeURIComponent()`解码[^2][^4][^5]。 - **传递方**（如微信小程序）： ```javascript const item = { name: "test", id: 1 }; wx.navigateTo({ url: '/pages/detail?data=' + encodeURIComponent(JSON.stringify(item)) }); ``` - **接收方**： ```javascript onLoad(options) { const jsonString = decodeURIComponent(options.data || '[]'); try { const data = JSON.parse(jsonString); } catch (e) { // 处理错误 } } ``` #### 3. **处理空值或无效数据** - 在解析前验证字符串是否有效： ```javascript if (!jsonString || jsonString.trim() === '') { // 使用默认值（如空数组或对象） return []; } ``` #### 4. **确保数据源可靠** - 如果是异步请求（如API），检查网络请求是否完整返回数据[^1][^3]。 - 使用`try-catch`包裹解析逻辑，增强健壮性： ```javascript let data; try { data = JSON.parse(jsonString); } catch (error) { console.error("JSON解析失败:", error); data = {}; // 设置默认值 } ``` ### 完整示例（微信小程序） #### 页面A（传递参数） ```javascript // 点击事件传递参数 toDetail(e) { const item = e.currentTarget.dataset.item; // 编码+序列化 wx.navigateTo({ url: `/pages/detail?data=${encodeURIComponent(JSON.stringify(item))}` }); } ``` #### 页面B（接收参数） ```javascript onLoad(options) { // 1. 获取参数并解码 const jsonString = decodeURIComponent(options.data || '{}'); // 2. 检查是否为空 if (!jsonString || jsonString === '{}') { console.warn("无有效数据"); return; } // 3. 安全解析 try { const item = JSON.parse(jsonString); console.log("解析成功:", item); } catch (e) { console.error("解析失败:", e); // 可设置默认值或提示用户 } } ``` ### 注意事项 - **编码必要性**：`encodeURIComponent` 确保特殊字符（如`&`, `=`）在URL中安全传输，避免截断[^2][^5]。 - **错误处理**：始终用`try-catch`处理`JSON.parse`，防止程序崩溃[^1][^3]。 - **数据备份**：对于关键数据，建议同时使用本地存储（如`localStorage`）或状态管理备份，减少依赖URL参数[^1]。 ### 相关问题 1. 如何传递对象或数组到新页面？ 2. 微信小程序如何避免页面刷新后参数丢失？ 3. 如何优化大量数据的路由传参？ [^1]: 路由传参页面刷新丢失数据。路由传参页面刷新会丢失数据 有时候我们需要传递给另一个页面传递一个对象,或者是数组包着对象.但是会导致传递过去的数据在页面刷新后会丢失,针对这个问题可以用下面的解决方法: 也只能用query方式传参,通过JSON.stringify()将一个JavaScript值(对象或者数组)转换为一个 JSON字符串。 [^2]: 解决报错SyntaxError：Unexpected end of JSON input。原因：若对象的参数或数组的元素中遇到地址，地址中包括、&这些特殊符号时，对象/数组先要通过JSON.stringify转化为字符串再通过encodeURIComponent编码，接收时，先通过decodeURIComponent解码再通过JSON.parse转换为JSON格式的对象/数组 [^3]: SyntaxError: Unexpected end of JSON input解决方法和思路。重新检查了JavaScript的代码，具体代码如下 [^4]: SyntaxError: Unexpected end of JSON input。列表页面代码: toDetail(e) { const item = e.currentTarget.dataset.item console.log('需要传递的参数', item) wx.navigateTo({ url: '/pagesA/paramsDetail/paramsDetail?item=' + encodeURIComponent(JSON.stringify(item)) }) [^5]: uniapp 开发出现这个 Error in onLoad hook: “SyntaxError: Unexpected end of JSON input“。页面A（JSON.stringify传参） uni.navigateTo({ url:"/pages/A/index?data="+encodeURIComponent(JSON.stringify(data)) });</think>### SyntaxError: Unexpected end of JSON input 错误解析与解决方案 #### **错误原因分析** 1. **JSON字符串不完整**（最常见原因）： - 传输过程中数据被截断（如URL长度限制） - 序列化/反序列化操作不一致 - 未正确编码特殊字符导致数据损坏[^2][^4] - 示例：`JSON.parse('{"name": "tes')`（缺少闭合引号和括号） 2. **空值或无效输入**： - 尝试解析空字符串：`JSON.parse('')` - 解析`undefined`或`null`：`JSON.parse(undefined)` - 数据源未正确初始化（如未传参时获取`options.data`）[^1][^3] 3. **特殊字符未编码**： - URL中的特殊字符（`&`, `=`, `?`等）破坏JSON结构 - 示例：`url: /detail?data={"a":1&b=2}`（`&`被识别为参数分隔符）[^2][^4] 4. **异步操作问题**： - 网络请求未完成就开始解析 - 文件读取未结束就处理数据 #### **解决方案** ##### 1. 完整数据传递方案（推荐） ```javascript // 发送方 - 编码处理 const data = [{id: 1}, {id: 2}]; wx.navigateTo({ url: `/pages/detail?data=${encodeURIComponent(JSON.stringify(data))}` }); // 接收方 - 安全解析 onLoad(options) { if (!options.data) return; // 空值检查 try { const decoded = decodeURIComponent(options.data); const parsedData = JSON.parse(decoded); console.log(parsedData); // 成功解析 } catch (e) { console.error("JSON解析失败:", e); // 错误处理 } } ``` **关键点**： - `encodeURIComponent` + `decodeURIComponent` 处理特殊字符[^2][^4][^5] - `try-catch` 捕获解析异常 - 空值检查避免操作未定义值 ##### 2. 调试与验证技巧 ```javascript // 调试时打印原始字符串 console.log("原始字符串:", options.data); // 验证JSON有效性函数 function isValidJSON(str) { try { JSON.parse(str); return true; } catch { return false; } } // 使用前验证 if (isValidJSON(decoded)) { // 安全操作 } ``` ##### 3. 特殊场景处理 **大数组传递优化**： ```javascript // 替代方案：使用本地存储 wx.setStorageSync('tempData', bigArray); wx.navigateTo({ url: '/pages/detail' }); // 接收方 onLoad() { const data = wx.getStorageSync('tempData'); wx.removeStorageSync('tempData'); // 及时清理 } ``` #### **预防措施** 1. **数据完整性检查**： ```javascript // 检查字符串是否完整 const isComplete = (str) => str.length > 0 && str.startsWith('[') && str.endsWith(']') || str.startsWith('{') && str.endsWith('}'); ``` 2. **参数安全处理原则**： - 所有动态参数必须经过`encodeURIComponent` - 解析前必须验证数据存在性 - 始终使用`try-catch`包裹`JSON.parse` 3. **框架推荐方案**： ```javascript // uni-app安全传参方案 uni.navigateTo({ url: `/pages/detail?data=${escape(JSON.stringify(data))}` }); // 接收方使用unescape const data = JSON.parse(unescape(options.data)); ``` #### **典型错误示例** ```javascript // ❌ 危险写法（缺少编码） wx.navigateTo({ url: `/detail?data=${JSON.stringify({name: "a&b"})}` }); // 实际URL变为：/detail?data={"name":"a => 解析失败 // ✅ 正确写法 wx.navigateTo({ url: `/detail?data=${encodeURIComponent(JSON.stringify({name: "a&b"}))}` }); // URL编码后：%7B%22name%22%3A%22a%26b%22%7D ``` > **关键结论**：此错误100%源于JSON字符串不完整或格式错误。通过`encodeURIComponent`+`decodeURIComponent`组合可解决95%的案例，剩余5%需配合数据验证和异常处理[^2][^4][^5]。 ### 相关问题 1. 如何在前端安全地处理URL参数？ 2. JSON.parse()和JSON.stringify()有哪些高级用法？ 3. 微信小程序页面间通信有哪些最佳实践？ 4. 如何优雅地处理JavaScript中的异步错误？ 5. 前端数据序列化需要注意哪些安全问题？ [^1]: syntaxError:unexpected end of JsoN input 如何解决。当出现 “syntaxError: unexpected end of JSON input” 错误时，通常是因为在解析JSON字符串时，JSON格式不完整或有错误导致JavaScript的JSON.parse()方法无法正确解析。 [^2]: 解决报错SyntaxError：Unexpected end of JSON input。原因：若对象的参数或数组的元素中遇到地址，地址中包括、&这些特殊符号时，对象/数组先要通过JSON.stringify转化为字符串再通过encodeURIComponent编码，接收时，先通过decodeURIComponent解码再通过JSON.parse转换为JSON格式的对象/数组 [^3]: SyntaxError: Unexpected end of JSON input解决方法和思路。重新检查了JavaScript的代码，具体代码如下 [^4]: SyntaxError: Unexpected end of JSON input。列表页面代码: toDetail(e) { const item = e.currentTarget.dataset.item console.log('需要传递的参数', item) wx.navigateTo({ url: '/pagesA/paramsDetail/paramsDetail?item=' + encodeURIComponent(JSON.stringify(item)) }) [^5]: uniapp 开发出现这个 Error in onLoad hook: “SyntaxError: Unexpected end of JSON input“。页面A（JSON.stringify传参） uni.navigateTo({ url:"/pages/A/index?data="+encodeURIComponent(JSON.stringify(data)) });
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值