浏览器中的 preview 和 response 显示的值不一致

最新推荐文章于 2023-11-02 07:46:09 发布
最新推荐文章于 2023-11-02 07:46:09 发布
阅读量3.1k 收藏 7
点赞数 3
分类专栏： 个人感触 技术博文 文章标签： preview 和 response 浏览器 Long Number
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dujing_15620553271/article/details/102978396
版权

 

背景：

图中是浏览器渲染的表结构，我们的节目ID在表结构中作为主键ID，是不会存在重复的情况的，那到底是怎么造成的呢？

 

 

逻辑梳理：

经过排查返回值，我们发现NetWork中的 preview 与我们页面所展示出来的值一致，主键ID是错误的🙅‍♂️，

我在js中设置debug，可以看到拿到的返回值和 preview 的一致，主键ID是错误的🙅‍♂️，但是...

NetWork中的 Response与页面展示的值不一致，但是却是正确的主键ID🙆，

我使用Postman来进行请求，发现请求值也是正确的🙆，那么问题就出现在浏览器上了！！

经过查阅资料，得知：

"由于JavaScript中Number类型的自身原因，并不能完全表示Long型的数字，在Long长度大于17位时会出现精度丢失的问题，超过17位的部分浏览器会转换为0显示"

后端请求返回的主键id为19位的Long型的数值，js中的Number类型只能解析其中的17位，其他几位补位为0，就会造成如上问题。

 

问题解决：

1、后台把long型改为String类型（推荐🙆）

JAVA Long String类型之间的转换

2、前端支持long型（不推荐🙅‍♂️）

如何在JavaScript中实现一个Long型——Long.js源码学习与分析

提莫拌一团蘑菇
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浏览器开发者工具网络选项卡：HTTP请求与响应
qyqzIsJavatar的博客
05-02 556
浏览器开发者工具的网络选项卡是Web开发者不可或缺的工具，它提供了深入监控HTTP请求和响应的能力。通过这个工具，开发者可以查看HTTP头部信息，验证如内容类型和服务器响应；观察发送到服务器的数据体，确保正确传输所有必要信息；以及检查服务器返回的原始数据。此外，该工具还能显示请求触发的源头和详细的时间线，帮助分析性能问题。使用网络选项卡可以有效地调试问题、优化性能，是提高开发效率的关键。
Preview-in-browser:一个Sketch插件，可以在浏览器中正确查看您的设计
05-12
在浏览器中预览 Sketch.app插件可在浏览器中正确查看您的设计。 这个插件有什么作用？ 与Sketch Mirror的网络预览功能不同，在浏览器中通过适当的滚动查看画板。 您的设计将与浏览器的中心对齐。 空白区域的背景...
F12 界面：请求响应内容 Preview 和 Response 不一致、接口返回数据和 jsp 解析到的内容不一致
热门推荐
愿我如星君如月 ... 夜夜流光相皎洁 ...
12-28 1万+
1. 情况描述： 我有一个接口只是简单的查询列表数据并返回给前端作一个表格展示。 接口返回的 userId 数据为：914081478893860687，但页面上解析到的值却是914081478893860700。 确认接口返回无误，数据库数据无误。 最终发现 在前端展示页面 F12 中，不同窗口获取到的值也不同。 Response 窗口返回的是正确结果，和接口返回数据一致： ...
【问题记录】控制台解析preview和response数据不一致→解决JS处理后台返回的Long型数据精度丢失
Kuroko's Development Notes
08-31 6302
问题描述： 后端返回数据preview和response不一致 （翻译成专业术语就是：JS处理后台返回的Long型数据精度丢失） 问题分析： JS在处理返回数据类型是Long的时候，精度会丢失一部分！！！ 问题原因： JS内置有32位整数，而number类型的安全整数是53位。如果超过53位，则精度会丢失。正如现在后台传来一个64位的Long型整数，因此超过了53位，所以后台返回的...
浏览器中的 响应(response )和 预览(preview )的值不一致 解决
最新发布
weixin_42048982的博客
11-02 2176
JavaScript中的数字类型有限制，无法准确表示超过2^53=9007199254740992（约9 * 10^15）的整数。当数字超过这个范围时，它们可能会被近似为最接近的可表示数字。要避免这种近似显示，你可以将大整数作为字符串处理，并在前端进行显示。这样可以确保完整的整数值被正确地传递和显示，而不会受到JavaScript数字类型精度的限制。今天掉接口，后端返回71289254424219648，响应是71289254424219648，预览变成了71289254424219650。
问题：当控制台解析preview和response数据不一致时，怎么处理
杨振洲的博客
01-21 2911
@[遇到的问题： 这次在做项目时，发现后端返回的数据在preview和response中不一致。response里的是正确的数据，可是取数据的时候只能拿到错误的。当时很是纳闷~~~ 问题原因： 原因是因为数据为Long型，返回给浏览器以后，浏览器转换数据格式的时候出现问题。也就说，JS在处理返回数据类型是Long的时候，因为Long类型位数过长，精度会丢失一部分。 解决思路： 后端把数据传到前...
问题记录2：preview 和 response的数据不一致的问题
钟于coding
04-18 1130
因为前端js所接收的数据Number类型并不能完全表示Long型的数字，在Long长度大于17位时会出现精度丢失的问题，超过17位的部分浏览器会转换为0显示。问题：preview 和 response的数据不一致的问题。postman调的接口返回的数据都是对的，但在浏览器中的preview中没有显示正确的数据。js中的Number类型只能解析其中的17位，其他几位补位为0，就会造成如上问题。在后端返回的类型改成String型。
chrome 中response与preview数据不一致的问题
HAN_789的博客
05-14 1753
问题产生原因 id是由雪花生成器 太长引起的问题 因为数据为Long型，返回给浏览器以后，浏览器转换数据格式的时候出现问题。类型为long，而显示的Id却不是Response中数据，相似却不同 解决方案1 Springboot项目，在配置文件中添加一句即可。 spring.jackson.generator.write_numbers_as_strings = true 后端还是使用Long类型，前端使用Number接收。 解决方案2 实体类中，id字段不使用Long类型，改为String...
chrome浏览器preview和response数据不一致
sfan0919的博客
11-11 2631
记录一个小bug 起因 一个后台管理页面，测试过程中发现预期页面是每十条一页的，实际显示出来本页有13条，且多出的数据都一模一样。看了下F12 控制台里preview的数据，发现服务端返回的数据是正常的十条。 定位 仔细查看每条数据的时候发现preview里的id有些是一样的。当时不知道是精度丢失的原因，拿着数据去数据库查不到数据。问了下开发才晓得是long类型的数据到前端会丢失。 专业解释： 数据为Long型，返回给浏览器以后，浏览器转换数据格式的时候出现问题。JS在处理返回数据类型是Long的时候，Lo
Android Studio preview 不固定及常见问题的解决办法
08-27
preview 可以帮助您预览您的布局文件将如何在用户的设备上...这篇文章主要介绍了Android Studio preview 不固定及常见问题的解决办法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
browser-preview：default在默认浏览器中预览html文件
02-01
在上下文菜单中选择“ Preview In Default Browser中Preview In Default Browser中预览文件↓ 命令 按Ctrl+Shift+P打开命令列表。 选择“ Preview In Default Browser 。 键绑定 在Win中按Ctrl+F1 ，在Mac中按Cmd+...
搜狗浏览器1.2preview
04-18
很好用的浏览器，最重要的是支持教育网加速功能
nodexer:浏览目录树并在浏览器中查看文件
05-07
它还被设计为具有复古感和简单感，这就是为什么它不使用任何浮华CSS或图标包的原因。 您可以在查看脚本的演示。 请注意，这是该项目的早期版本，因此可能包含一些错误。 安装 NPM npm install nodexer 用法 需要...
Preview和Response的结果不一样
fern_ok的博客
07-12 2062
Preview和Response的结果不一样
关于接口返回的数据，每次顺序都不一致的问题
qq_44309181的博客
04-26 1149
在默认情况下，如果排序字段包含 NULL 值，MySQL 会将 NULL 值视为最小值，并将其排在所有非 NULL 值的前面，如果使用 DESC 排序，NULL 值会被视为最大值，排在所有非 NULL 值的后面。这是因为在 SQL 标准中，NULL 值被视为未知值，无法进行比较大小的操作。因此，MySQL 在排序过程中无法确定 NULL 值与其他非 NULL 值之间的大小关系，从而无法正确排序。在 MySQL 中，当排序字段包含 NULL 值时，排序结果的顺序可能会出现不确定的情况，即顺序会乱。
浏览器中的 preview 和 response 的值不一致
qq_38031120的博客
11-20 7127
背景 一般情况下我们看Network里面的Preview和Response的结果似乎一模一样。 不管是请求页面，请求页面还是请求js还是请求css，二者的结果都一样。 在Preview中，控制台会把发送过来的json数据自动转换成javascript的对象格式； 而这个时候，突发bug页面显示和response中的一样，但是preview却不一样。 preview response 梳理 NetWork中的preview是...
chrome中preview和response数据不一致？如何解决！
weixin_30675967的博客
07-27 3555
浏览器的有的时候数据转换会出错；一般情况下我们看Network里面的Preview和Response的结果似乎一模一样。 不管是请求页面，请求页面还是请求js还是请求css，二者的结果都一样。 在Preview(预览功能)中，控制台会把发送过来的json数据自动转换成javascript的对象格式； 而这个时候，突发bug页面显示和response中的一样，但是preview却不一样。 原...
【解决】控制台解析preview和response数据不一致,并使用transformResponse修改响应数据
weixin_46413834的博客
08-28 602
前端接收后，后面的几位都变成0了,由于JavaScript中Number类型的自身原因，并不能完全表示Long型的数字，在Long长度大于17位时会出现精度丢失的问题。在Preview(预览功能)中，控制台会把发送过来的json数据自动转换成javascript的对象格式。因为数据为Long型，返回给浏览器以后，浏览器转换数据格式的时候出现问题。方案二：在传递给 then/catch 前，结合开源库。，使用transformResponse修改响应数据。方案一：在返回数据之前就将。
Java 实现浏览器下载文件及文件预览
06-09
Java 实现浏览器下载文件可以使用以下代码： ```java //设置响应头 response.setContentType("application/octet-stream"); response.setHeader("Content-Disposition", "attachment; filename=" + fileName); //获取文件输入流 InputStream inputStream = new FileInputStream(file); //获取响应输出流 OutputStream outputStream = response.getOutputStream(); //将文件写入响应输出流 byte[] buffer = new byte[1024]; int len; while ((len = inputStream.read(buffer)) != -1) { outputStream.write(buffer, 0, len); } //关闭流 outputStream.flush(); outputStream.close(); inputStream.close(); ``` 其中，`response` 是 HttpServletResponse 对象，`file` 是要下载的文件对象，`fileName` 是下载时显示的文件名。 Java 实现浏览器文件预览可以使用以下代码： ```java //设置响应头 response.setContentType("application/pdf"); //获取文件输入流 InputStream inputStream = new FileInputStream(file); //获取响应输出流 OutputStream outputStream = response.getOutputStream(); //将文件写入响应输出流 byte[] buffer = new byte[1024]; int len; while ((len = inputStream.read(buffer)) != -1) { outputStream.write(buffer, 0, len); } //关闭流 outputStream.flush(); outputStream.close(); inputStream.close(); ``` 其中，`response` 是 HttpServletResponse 对象，`file` 是要预览的文件对象。这里以 PDF 文件为例，设置响应头为 `application/pdf`，其他类型的文件可以根据需要设置不同的响应头。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值