json返回数据如何在html显示？

qadan 发表于 2020-2-24 12:28

假设请求www.baidu.com，得到一个json数据，如下：
{
"code": 1,
"msg": "解析成功",
"name": "#卧槽无情为什么别人模仿我都火了，而我原创的不火呢，你们说说为啥",
"url": "http://v3-dy-y.ixigua.com/c9d7810003942dd48f47f8624fd760e7/5e534ea3/video/tos/cn/tos-cn-ve-15/9b1b3eb658d347de9c9fb3542b0178e9/?a=1128&br=3663&bt=1221&cr=0&cs=0&dr=0&ds=6&er=&l=202002241118350100120592311A064DF9&lr=&qs=0&rc=am9kdWd5O2tlczMzNWkzM0ApNDg4Nmk4ZWU8NzU6NGg3M2c0X3Mxci8wZTVfLS1jLS9zc2IuNi5jYy80Xy9iXmBgY2I6Yw%3D%3D&vl=&vr=",
"img": "http://p3-dy.byteimg.com/large/tos-cn-p-0015/b59ce6af82f94e17be911ffb6e07e2e1_1582348495.jpeg?from=2563711402_large",
"img_run": "https://p9-dy.byteimg.com/obj/tos-cn-p-0015/dd2b4ea9d5af4b3a8076d4e18d04c261_1582348495?from=2563711402_large",
"zan": "1484797",
"pl": "34603"
}
以下是我的网页
<input type="text" placeholder="请输入链接" />
<input type="button" value="获取" /><br>
<input type="text" placeholder="这是视频标题" />
<img src="https://www.baidu.com/img/baidu_jgylogo3.gif" alt="" /><br>
<iframe src="https://www.baidu.com/"></iframe>
我想将上面的json数据对应显示在我的网页中
json：name显示在网页的<input type="text" placeholder="这是视频标题" />
img显示在网页img src中
json 中url显示在网页的iframe中
百度了好多，都不是我想要的，所以请教下各位大神{:301_985:}

飞龙project 发表于 2020-2-24 12:44

本帖最后由飞龙project 于 2020-2-24 12:48 编辑

首先需要js来分析json文件，分析后数据需要匹配每个标签页的id输出到html里
（只提供思路，毕竟我也不是专门写网页的）

Zero丶one 发表于 2020-2-24 12:51

用vue吧 vue+是springboot开发就是后端返回数据前端vue渲染数据

FINALE11 发表于 2020-2-24 12:52

document.getElementById().value = res.data.xxxxx

xiajin 发表于 2020-2-24 12:55

如果是前端直接请求接口，你要看他返回的数据结构，如果是对象直接调用res.code、res.name调用。

如果是字符串需要转换成对象，然后通过对象调用它属性访问（展示）。

luopo 发表于 2020-2-24 12:55

使用json，后台可以直接传递json数组到前台，也可以把json格式的字符串传递到前台，然后js中去接收他。使用js赋值到html网页中
php后台：
exit(json_encode(array(
         'code'=>0,
         'msg'=>'保存成功！',
         'data'=>$data,
   )));

前台script中
$.post('/save', data, function(res) {
   if (res.code > 0) {
         alert(res);
   }
   $('#b1').val(res.data.b1);
   $('#b2').val(res.data.b2);
}, 'json');

felixdream 发表于 2020-2-24 12:59

请问什么叫做显示在什么里面，请问你所谓的请求指的是用什么请求？
暂考虑你在写一个web应用（有服务端），思路：得到JSON数据后，把数据解析出来，再拼接成字符串（所谓的html文本），返回给客户端。
如果是纯前端问题，熟悉javascript，操作一下元素还是比较简单。如果不太熟悉，还想做出成果，可以尝试用jquery去操作元素。
另外提供个思路，如果你在服务端不能写出一些前端可以渲染内容，可以把数据写到<script>标签里面，再由前端渲染。

dafei2599 发表于 2020-2-24 13:04

参考一下json cn的js？

setycyas 发表于 2020-2-24 13:12

需要用javascript.建议看看jQuery库,简单实用.

$('#控件id').val(变量)
就行

吾爱小洪 发表于 2020-2-24 13:27

https://blog.csdn.net/xiaohongIT/article/details/83855657

页: [1] 2

吾爱破解 - 52pojie.cn's Archiver

json返回数据如何在html显示？