面对后端传过来的JSON数据前端开发中如何解析

最新推荐文章于 2023-08-21 20:00:56 发布
最新推荐文章于 2023-08-21 20:00:56 发布
阅读量7.7k 收藏 26
点赞数 5
文章标签： json ajax java java json json jar
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cssnnd/article/details/107298013
版权
本文探讨了在前端开发中如何处理后端通过Ajax传递的JSON数据。通过示例展示了如何获取JSON对象中的特定属性，如msg和data内的name数据。同时也提及了当JSON数据包含数组时的处理方法。
摘要由CSDN通过智能技术生成

首先解释一下我想要获取的数据，利用Ajax和后端进行异步请求
在这里插入图片描述

然后后端发送过来的数据通过alert()是这样的

在这里插入图片描述
那么问题就是我该如何得到这组数据中的msg中的数据或者data中的name的数据
JSON.parse()方法，这个方法在我们的JS中是一个自带的方法，
调用的时候直接通过JS对象.属性名就可以食用了
在这里插入图片描述在这里插入图片描述在这里插入图片描述

在这里插入图片描述
如果传过来的JSON数据中还包含了数组，例如长这样子

最低0.47元/天 解锁文章
瓦坎达forever
关注
  • 5
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
后台对于JSON 数据的解析
weixin_39482360的博客
09-13 867
转自：https://blog.csdn.net/qq_30125555/article/details/79066036 JSON数据解析的有点在于他的体积小，在网络上传输的时候可以更省流量，所以使用越来越广泛，下面介绍使用JsonObject和JsonArray的两种方式解析Json数据。 使用以上两种方式解析json均需要依赖json-lib.jar开发包使用依赖包 1、JsonObj...
后台返回json数据给前台和前台解析json数据（总结）
热门推荐
空空说技术的博客
11-05 7万+
后台返回json数据和前台解析json数据 一般来说web开发中，前台采用json数据提交给后台，后台处理数据以后返回json数据给前台，前台解析json，显示数据。 总而言之，前后台直接交换的数据格式最常用的非json数据无疑了。 这里就总结一些json数据的前后台处理方式。 1.JSON数据 JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据...
前端-解析后台json字符串
weixin_52164116的博客
12-15 1738
在渲染数据的时候，后端接口返回了一段字符串，要处理后在页面进行展示 页面处理返回的数据，json.parse方法 //静态页面 <div class="pic"> <img :src="getImages(ite.picture)" /> </div> // 获取图片 getImages(data) { if (!data) { return [] } e
小功能实现（二）前端解析从后端传来的对象数组
qq_44648936的博客
05-05 1990
小功能介绍 前端解析从后端传过来的对象数组，并输出 后端要传的数组 具体实现 如下，先赋值（记得在data里先声明，然后这里的ajax经过我的封装，不能直接使用） let that = this; that.ajax(that.url.searchSelfCheckin,'GET',null,function(resp){ that.list=resp.data.list; }) 然后应用 <view v-for="checkin in list" :key="checkin.date">
前端处理后端JSON数据
sdhuangzheng的博客
08-22 2935
前端人员一般接受的都是JSON，是无法直接使用的，那么咱们就将后端反应的数据转换为对象 话不多说，直接上代码： 强调一下，我用的是vue+VnatUI 这是在template标签里面的 <van-button type="primary" @click="Dome">主要按钮</van-button> <span> {{ress}} </span>``` 这是在script标签里面的： data() { return { ress: ''
后台返回的json前端如何解析
android之旅的博客
12-13 3448
比如后台返回的数据是这样的 { “success”: true, “msg”: “操作成功”, “obj”: [ { “position”: 1, “name”: “小明”, “number”: “10001”, “school”: “中大”
前端必备的谷歌浏览器JSON可视化插件：JSON-Handle
05-27
在前端开发过程中，处理JSON数据是一项常见的任务，尤其是在调试API接口、查看响应数据或构建动态应用时。然而，原始的JSON字符串往往难以理解和调试，这时就需要借助工具进行格式化和可视化。 "JSON-Handle"是一个...
Vue axios 将传递的json数据转为form data的例子
12-13
在Vue.js应用中，我们经常...总的来说，了解如何在Vue中正确地转换和发送数据类型是开发过程中的重要技能，特别是当你面对各种不同后端接口需求时。通过使用axios和qs，你可以灵活地调整你的HTTP请求以适应各种场景。
asp.net 2.0中利用Ajax2.0实现JSON传送大量页面数据
10-29
在Web开发中，随着用户对交互体验的要求越来越高，如何高效地处理前端与后端之间的数据交互成为了关键问题之一。尤其是在ASP.NET 2.0环境下，面对需要大量数据交互的应用场景时，传统的页面加载方式会带来用户体验上...
C#后台返回json类型数据
11-29
在Web开发中，经常需要从前端向后端发送请求并获取响应数据。其中一种常见的数据格式就是JSON（JavaScript Object Notation），它是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。在.NET...
Python 后端开发人员.pdf
最新发布
04-14
- **需求分析与沟通**：能够准确理解业务需求，并与前端开发、产品经理等不同角色进行有效沟通。 - **问题解决能力**：面对复杂问题时具备良好的逻辑思维和问题解决技巧。 #### 七、高级话题 - **异步编程**：了解...
前端传递json格式，后端解析方法
csdn_hmt的博客
11-17 1730
如果前端传递的是：{“userId”:“zhangwei”,“groupId”:131,“userOrder”:30} 后端用String接收，然后JSONObject.parse(),就可以转化为JSONObject了 如果前端传递的是：[{“groupId”:1,“userOrder”:1},{“userId”:“a’s’d”,“groupId”:1,“userOrder”:2}] 后端也用String接收，然后JSONArray.parseArray(),就可以转换成JSONArray了 ...
JSON简介及前端简单解析(一)
两个蝴蝶飞
08-21 2235
JSON,全称是JavaScript Object Natotion(JavaScript 对象表示法)，是存储和交换文本信息的语法。与XML类似。但JSON 比 XML 更小、更快，更易解析。是轻量级的，且具有自我描述性，更好地理解。JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。
java后台服务器端传递json字符串到前端，前端识别错误问题
隐0士的博客
03-05 2978
使用struts后台action在request.setAttribute("vo",JSONObject.fromObject(vo).toString()); 这时候传回前端，在js获取时“${vo}”总是报错“{”未结束的错，因为此时传递的字符只被前端识别了“{”，这是由于传递的json字符串里的“号没被转义直接放在里面，于是想到在后台对json字符串做一个替换，把“换成‘符号。 rep
前端解析后台的对象数据
weixin_38671006的博客
09-09 768
后台的对象转为json字符串，前段将字符串转为json对象，之后解析； 解析Json字符串的三种方法日常常用 https://www.jb51.net/article/139229.htm import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONArray; String str=JSON.toJSON(li...
前端获取后端的数组对象处理（去重，排序，转为树状结构）
qq_43493141的博客
07-26 1812
后端接口数据处理，对于数组对象 下面为后端转过来的一个扁平数据 var data = [ { id: '1', staffName: '陈三三', trueProRank: { id: "11", description: "交警", codeIndex: 11, category: "警务人员", categoryIndex: 1 } ...
前端解析后台返回的JSONArray字符串
简乐君
03-21 1万+
$(function(){ $.ajax({ url:"${ctx}/showAct.do", async:true, type:'GET', dataType:'json',//这里注意一定要是json类型 success:function(resMsg){//resMsg是一个jsonarray字符
vue3中前端处理不同数据结构的JSON
故里2130
03-03 1万+
有时候，后端返回的JSON数据格式，是前端不需要的格式类型，这时，要么让后端修改，你要什么格式，那么让后端大哥哥给你返回什么格式。但是有时候不尽人意，后端大哥哥让你自己转换，此时就甩给前端了，只能在前端自己处理了。
Spring Boot笔记-get请求发送json数据（方便前端vue解析）
IT1995的博客
07-19 1万+
目录 基本概念 代码与实例 基本概念 这里有一个思路，后端只发送Json数据，前端vue去解析。这样的话，就可以做到前后端分离，耦合性就很低了。 代码与实例 程序运行截图如下： 得到后，使用vue去解析，然后页面显示。 这里可以使用nginx做个代理，就看不出来了！ 结构如下： 这里vo就是存的Json格式 controller就是发送请求的 ...
后端传过来的json中包含富文本 js怎么解析
06-10
如果你想在前端将后端传过来的 JSON 中的富文本进行解析并渲染到页面上，可以使用第三方库，比如 `DOMPurify` 和 `marked`。 `DOMPurify` 可以帮助你清除富文本中的不安全的内容，比如 script 标签、onclick 属性等，以防止 XSS 攻击。示例代码如下： ``` javascript import DOMPurify from 'dompurify'; const json = { richText: '<p>Hello, <strong>world!</strong></p>' }; const sanitizedHtml = DOMPurify.sanitize(json.richText); document.getElementById('my-element').innerHTML = sanitizedHtml; ``` 这里使用 `dompurify` 库中的 `sanitize` 方法来清除富文本中的不安全内容，然后将清除后的 HTML 插入到页面元素中。 如果你想支持更多的富文本元素，可以使用 `marked` 库来将 Markdown 格式的文本转换为 HTML。示例代码如下： ``` javascript import DOMPurify from 'dompurify'; import marked from 'marked'; const json = { markdown: '## Hello, **world!**' }; const html = marked(json.markdown); const sanitizedHtml = DOMPurify.sanitize(html); document.getElementById('my-element').innerHTML = sanitizedHtml; ``` 这里先使用 `marked` 库将 Markdown 格式的文本转换为 HTML，然后再使用 `dompurify` 库来清除不安全内容，最后将清除后的 HTML 插入到页面元素中。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值