发送JSON，页面显示???，已解决

最新推荐文章于 2024-08-19 09:33:41 发布
原创 最新推荐文章于 2024-08-19 09:33:41 发布 · 644 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

 Could not resolve view with name '{"success":false,"msg":"????"}' in servlet with name 'springmvc' 
我springmvc框架，火狐老提示这个错误，找了我大半天，怎么前面识别后面这段就不识别了。后台正确JSONObject.toString();
后来发现是，方法前少了@ResponseBody微笑

csilverai
关注
json数据在Html页面格式化显示
11-01
json数据在Html页面，采用光标事件格式化展示，方便用户查看对比接口文档
SAP 接口日志+JSON 显示网页渲染
03-14
在SAP的背景下，这通常涉及到通过SAP接口获取数据，并将这些数据通过JSON格式发送到前端。前端接收到JSON格式的响应数据后，可以通过JavaScript进行解析，并利用诸如AJAX或Fetch API等技术，将解析后的数据填充到...
解析JSON数据系列1：在网页上显示Json数据
luoshiwutai的博客
10-10 5721
Json的全称：JavaScriptObjectNotation Json的两种构建结构：“名称/值”对的集合、值的有序列表。 移动客户端（android和iphone）接收返回的数据和平台无关，平台可以是Java、.net或者php。 移动客户端请求服务器端，一般是采用Json这种轻量级的形式。 JSON的数据格式： JSON对象是一个无序的“‘名称/值’对”集
vue-json-viewer插件实现JSON数据在页面的展示【高亮、可折叠、可复制】
任磊
12-09 5370
利用vue-json-viewer插件，利用这个插件，可方便快速实现高亮，JSON折叠，copy 三种功能！！！ 官网地址：https://www.npmjs.com/package/vue-json-viewer 效果展示 需要展示的JSON数据： { "Data": { "Body": "ew0KICAgICJuYW1lIjogIlN5c3RlbSIsDQogICAgImNvbmRpdGlvbnMiOiAiQ29udHJhY3RDb25kaXRpb25zKFwiQDFEu...
vue 在网页中显示json 格式
wodecc_u的博客
08-19 447
【代码】vue 在网页中显示json 格式。
格式化后的json在页面显示
qq_45838276的博客
08-21 176
【代码】格式化后的json在页面显示。
用ajax传递json到前台中文出现问号乱码问题的解决办法
12-09
我使用的Springmvc，在controller层传输一个json到前台，后台显示没问题，中文正常显示而到了前台 中文就变成了问号。 后来发现，因为在controller中返回json用了@ResponseBody，而spring源码中@ResponseBody 的实现...
ThinkPHP的success并不跳转页面，而是直接输出json字符串的原因.zip解决ThinkPHP的success并不跳转页面，而是直接输出json字符
01-11
另外，从“ThinkPHP框架 的success方法_为什么我这么写显示出来的是一串json数据.url”这个文件名来看，你可能在尝试访问某个URL，而这个URL对应的操作导致了`success`方法的调用。在ThinkPHP中，URL路由和控制器...
asp.net 2.0中利用Ajax2.0实现JSON传送大量页面数据
10-29
### ASP.NET 2.0中利用Ajax 2.0实现JSON传送大量页面数据 #### 一、背景介绍 在Web开发中，随着用户对交互体验的要求越来越高，如何高效地处理前端与后端之间的数据交互成为了关键问题之一。尤其是在ASP.NET 2.0...
jquery+json实现页面无刷新分页
03-21
在网页开发中，为了提供更好的用户体验，页面无...总的来说，jQuery和JSON的结合为实现页面无刷新分页提供了一种高效且灵活的解决方案。通过理解这个过程并熟练运用相关工具，开发者可以构建出更加流畅的Web应用程序。
在html页面中展示JSON，JSON.stringify用法
青颜的天空的博客
07-05 4377
问题描述： 有时候我们需要将json数据直接显示在页面上（比如需要将接口返回的结果直接展示），如果直接显示字符串，不美观也不方便查看。比如： 这时就需要把json格式化一下展示了，格式化成下图的样式就完美啦。 解决方案： 首先使用JSON.stringify将JSON格式化： // 返回一个表示给定值的JSON字符串。 JSON.stringify(value[, replacer [, space]]); JSON.stringify() 方法将一个 JavaScript 值（对象或者数组）转换
用json处理字符串，以表格的形式显示在网页上
weixin_62549963的博客
11-30 1017
json的使用，eval的使用。JavaScript绑定
页面错误提示
11-26 131
window.onerror = function (errMsg, scriptURI, lineNumber, columnNumber, errorObj) { setTimeout(function () { var rst = { "错误信息：": errMsg, "出错文件：": script...
Chrome：如何在页面树状显示后端返回的JSON数据
qq_24052051的博客
10-20 2654
如何在Chrome页面树状显示后端返回的JSON数据？在进行后端开发的时候，对于一些通过地址传递参数或无参数的控制器接口，我们会在浏览器直接进行测试。
前端脚本实现json文件展示和搜索
weixin_39246324的博客
12-08 3072
展示json文件，并附带搜索、定位功能
如何在html页面中显示JSON数据
热门推荐
希望我的博客，能帮上你解决学习中工作中所遇到的问题,也期待与您一起探讨技术问题，共同成长。
06-16 1万+
有时候我们需要将json数据直接显示在页面上（比如在做一个接口测试的项目，需要将接口返回的结果直接展示），但是如果直接显示字符串，不方便查看。需要格式化一下。
服务端传来的JSON数据出现乱码，中文显示为"??????" 多个问号
qq_39039017的博客
06-11 6084
问题描述：服务端传来的JSON数据出现乱码，中文都显示为”????????”。 这是出现该错误的原码，请仔细观察注释部分，相信你一看就明白了。 解决方案：编码设置需要设置在IO流前面，否者编码无效，如果你遇到该问题，请查看是否写错顺序了。...
解决json返回到客户端中文出现乱码显示问号的问题
kk123k的博客
06-25 3750
原创作品。转载请注明出处https://blog.youkuaiyun.com/kk123kSpringMVC用ajax向服务器端获取数据时返回的json到客户端时中文会出现乱码显示“???”，其中，我的controller如下@ResponseBody @RequestMapping(value = "getCourse")通过查阅源码发现Spring的@ResponseBody 的实现类默认的编码是 is...
使用＜pre＞和JSON.stringify处理网页展示JSON的格式
裕东方的博客
07-11 1882
使用和JSON.stringify处理网页展示JSON的格式
如何防止全量刷新而导致只显示Json数据？
最新发布
03-31
<think>嗯，用户问如何防止全量刷新导致只显示JSON数据的问题。之前他们提到过后端返回的JSON直接覆盖了前端界面，所以现在想解决全量刷新的情况。首先，我需要回忆之前的对话内容，用户可能是在开发过程中遇到了表单提交或者页面跳转导致整个页面被替换成JSON数据的情况。 用户可能是前端开发者，或者是刚开始学习前端的新手，对如何正确处理AJAX请求和防止页面跳转不太熟悉。他们的需求是避免整个页面刷新，只局部更新数据，同时正确处理后端返回的JSON。深层需求可能是希望提升用户体验，确保前端应用的单页行为，避免意外的页面重载。 接下来，我需要整理解决方法。首先想到的是阻止表单的默认提交行为，使用JavaScript来拦截表单的提交事件，改用AJAX发送请求。这样就不会触发页面的全量刷新。同时，需要确保后端返回的数据是正确的内容类型，比如application/json，而前端正确解析这些数据。 然后，考虑使用Fetch API或者Axios这样的库来处理异步请求，这些库默认不会导致页面跳转。另外，可能需要检查路由配置，特别是在单页应用中使用前端路由，如React Router或Vue Router，来管理页面导航，避免向后端请求整个页面。 还有可能用户没有正确设置响应头，导致浏览器误将JSON当作HTML来渲染，这时候需要确保后端设置正确的Content-Type头。另外，表单的action和method属性是否正确，是否应该使用POST而不是GET，以防止数据附加到URL导致意外行为。 另外，可能用户在处理响应时没有更新DOM的正确部分，导致整个页面被覆盖。需要指导他们定位到特定的DOM元素进行更新，而不是替换整个body的内容。此外，错误处理也很重要，比如网络请求失败时的处理，避免页面崩溃或显示不完整的数据。 总结下来，解决步骤应该包括阻止默认事件、使用AJAX请求、正确设置请求头、处理响应更新DOM、检查路由和配置、以及错误处理。需要分点说明，结构清晰，让用户能一步步排查和解决问题。还要注意使用用户可能熟悉的工具和库，比如jQuery、Fetch、Axios等，给出具体的代码示例，帮助他们理解如何实现。</think>要防止全量刷新导致页面直接显示后端返回的 JSON 数据，需从**请求方式**和**数据解析**两个核心环节入手。以下是具体解决方案和代码示例： --- ### 一、阻止默认全量刷新的行为 #### 1. **表单提交场景：拦截默认提交动作** ```html <form id="myForm" onsubmit="return handleSubmit(event)"> <input type="text" name="username"> <button type="submit">提交</button> </form> <script> function handleSubmit(event) { event.preventDefault(); // 关键：阻止表单默认全量提交 const formData = new FormData(event.target); // 改用异步请求发送数据 fetch('/api/submit', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => { // 局部更新页面内容，而非全量刷新 document.getElementById('result').innerHTML = data.message; }); return false; // 确保表单不会触发页面跳转 } </script> ``` #### 2. **超链接跳转场景：拦截默认跳转** ```javascript document.querySelector('a').addEventListener('click', function(e) { e.preventDefault(); // 阻止链接默认跳转 fetch('/api/data') .then(response => response.json()) .then(data => { // 局部更新页面内容 document.getElementById('content').textContent = data.value; }); }); ``` --- ### 二、规范前后端数据交互 #### 1. **后端响应头设置** 确保后端返回的响应头包含 `Content-Type: application/json`，避免浏览器误将 JSON 当作 HTML 解析： ```python # Flask 示例 from flask import jsonify @app.route('/api/data') def get_data(): return jsonify({"status": "success"}), 200, {'Content-Type': 'application/json'} ``` #### 2. **前端明确指定请求类型** 在 AJAX 请求中声明期望的响应格式（如 `Accept: application/json`）： ```javascript fetch('/api/data', { headers: { 'Accept': 'application/json' // 明确要求返回 JSON } }); ``` --- ### 三、使用前端框架/路由控制 #### 1. **单页应用（SPA）路由管理** 使用 `React Router`、`Vue Router` 等前端路由工具，避免向后端请求完整页面： ```javascript // React Router 示例 import { BrowserRouter as Router, Route } from 'react-router-dom'; function App() { return ( <Router> <Route path="/data" component={DataComponent} /> // 前端路由，不触发全量刷新 </Router> ); } ``` #### 2. **状态管理更新** 通过框架状态管理（如 Vuex、Redux）局部更新数据： ```javascript // Vue 3 示例 const store = createStore({ state() { return { data: null } }, mutations: { updateData(state, payload) { state.data = payload; // 仅更新数据，不刷新页面 } } }); ``` --- ### 四、常见问题排查 1. **检查请求类型** 确保使用 `GET`/`POST` 的请求与后端接口定义一致，避免 `GET` 请求意外附加参数到 URL。 2. **验证跨域问题** 若接口跨域，需配置 CORS 响应头（如 `Access-Control-Allow-Origin`），否则浏览器会拦截响应。 3. **错误处理兜底** 为异步请求添加 `catch` 逻辑，避免未处理的错误导致页面异常： ```javascript fetch('/api/data') .then(response => response.json()) .then(data => updateUI(data)) .catch(error => { console.error('请求失败:', error); document.getElementById('error').textContent = '加载失败，请重试'; }); ``` --- ### 总结方案对比 | 场景 | 解决方案 | 技术要点 | |--------------------|-----------------------------|---------------------------------| | 表单提交全量刷新 | 拦截 `submit` 事件 + AJAX | `event.preventDefault()` | | 超链接跳转问题 | 拦截 `click` 事件 + 异步请求 | 阻止默认行为 + 局部更新 | | 后端返回格式错误 | 设置 `Content-Type` 响应头 | 明确声明 JSON 类型 | | 前端路由管理 | 使用 SPA 框架路由 | 避免向后端请求 HTML 页面 | 通过以上方法，可确保页面仅通过异步请求获取数据，并精准更新局部内容，避免全量刷新导致的 JSON 直接渲染问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值