怎么将html直接显示json数据据显示到html页面各个标签里,是显示成纯静态页面，可查看源码，而不是js指定显示在指定元素

来源：蜘蛛抓取(WebSpider) 时间：2018-08-15 19:30 标签： json数据显示在html
404 Not Found
The requested URL /q/9359 was not found on this server.俗话说，分久必合，合久必分
什么东西都阻挡不了大势，俗话说，大势所趋就是这个道理
在多终端的环境下，以前让服务端比如php那些煞笔在页面上直接输出数据的年代早就过去啦，
什么？你们还这样做？
那就有人要问了，那现在流行什么呢？请容我细细道来
那就是数据和前端绝对的分开，服务器只负责提供 一串json数据，至于数据怎么展示，就交给前端啦，所以一个接口可以满足web，ios，android，等各种需求
哎呦，需求很强烈呀！
对于网页前端的我们，以前的那些遍历数据的操作就全部到我们手里了
$("#xxx").val()
$("#xxx").html()
$("#xxx").attr()
就出现了，一个一个写，好烦啊
甚至还有数组，我们要这样
for(var i=0;i&i++) {
$("&p&"+xx+"eee"+""+"&/p&").apendTo(xxxx)
怎么办呢？能不能我只要写好一些属性，你就我自动给生成呢？
&span data-name&&/span&
自动把json的里的name给塞进去，多舒服
下面楼主就给大家写一个插件
啥叫插件？就是插进去的一件东西。。。
有朋友说了？噢。。。那我也有。。。
一个基于jQuery的json数据快速展示系统
&div class="info"&
&span render-html="weather"&&/span&
&ul render-loop="seven_days"&
&li render-html="seven_days.weather"&&/li&
var data = {
weather:'晴',
seven_days:[
weather:'阴'
weather:'雾霾'
weather:'小雨'
$(".info").renderValues(data);
1.所有的数据展示都是在某一个标签内 比如
&span render-html="username"&&/span&
循环类型的只循环，子元素的第一个元素，所以尽量套一个div进去
&div render-loop="seven_days"&
&span render-html="seven_days.temperature"&&/span&
&span render-html="seven_days.weather"&&/span&
错误的写法
&div render-loop="seven_days"&
&span render-html="seven_days.temperature"&&/span&
&span render-html="seven_days.weather"&&/span&
2.可以render的类型有如下一个
render-html,
render-src,
render-value,
render-href,
render-loop,
render-attr(这个类型自定义属性例子:render-attr="userid=uid")
代码地址当然要在github上拉
https://github.com/suxianbaozi/jrender
ok就到这里,大家去试试吧
ajax实现从后台拿数据显示在HTML前端
HTML页面，ajax是基于id的，所有用id表示。
拿到的数据会显示在这里
ajax源码：
$(document).ready(function() {
利用js将ajax获取到的后台数据动态加载至网页中
利用js将ajax获取到的后台数据动态加载至网页中，生成二级菜单树。
html解析json数据为表格table显示
window.onload=functi...
AJax 把拿到的后台数据在页面中渲染
AJax 把拿到的后台数据在页面中渲染
Ajax获取json值并渲染到页面
现在超流行fetch的获取数据的方法，但是我对获取数据还一无所知，所以只是学习一下Ajax的方法，希望对后面fetch的理解有帮助
var xhr = new XMLHttpRequest();...
Ajax 分四步骤：
创建一个Ajax对象；
打开一个链接；
监听请求的数据；
发送请求。
直接贴代码啦
$(function (...
Ajax获取 Json文件提取数据
Ajax获取 Json文件提取数据
json文件内容(item.json)
&name&:&张...
ajax在两个页面之间进行传参操作一个页面获取值 并将获取的值 通过ajax传递到后台
并将数据返回的数据进行后台渲染...
使用getJSON
web页面上可视化展示JSON数据的方法
0 引言最近需要做一个接口管理的功能，需要在前端页面展示从接口获取到的json数据，我上网查了一些资料，发现有 jquery的一个插件可以使用:jQuery.json-viewer 。页面展示的效果很...
没有更多推荐了，赞助商推荐()：jDataExchange——一个用来做html界面元素与json数据进行交换的javascript库 - CNode技术社区
这家伙很懒，什么个性签名都没有留下。
为了从繁琐的html的数据表单中进行数据与json数据交换后，表单的元素input,select,textarea等的值属性名称都是固定的不变的，利用javascript的反射机制将json数据对应key与表单元素相应的key(一般是name属性的值作为key)一一对应起来，从而实现了jDataExchange这个库来使用简单的几句JS代码实现了从表单数据获取数据到json数据中与将json数据设置到表单数据中。
jDataExchange采用是JS+DOM的方式进行编写的，所以jDataExchange可以与其他框架如React,PHP等无缝对接使用。
jDataExchange与html5的formdata的区别：
不需要浏览器的html5特性支持，
formdata的数据无法设置到表单中
不支持file类型的获取与设置
设计好你的网页界面，如下：
&form id=&myform&&
Hidden: &input name=&_csrf& type=&hidden& value=&&/& &br/&
Name: &input name=&name& type=&text& value=&& /& &br/&
Password: &input name=&password& type=&password& value=&& /& &br/&
Sex: &input name=&sex& type=&radio& value=&Male& checked=&checked&/&
&input name=&sex& type=&radio& value=&Female&/& &br/&
Fruit: &input name=&fruit& type=&checkbox& value=&Apple&/&Apple
&input name=&fruit& type=&checkbox& value=&Banana&/&Banana
&input name=&fruit& type=&checkbox& value=&Orange&/&Orange &br/&
Country: &select name=&country&&
&option value=&&&--请选择--&/option&
&option value=&中国&&中国&/option&
&option value=&美国&&美国&/option&
&/select&&br/&
Note: &textarea name=&note&&&/textarea&&br/&
&input type=&reset& value=&Reset&/& &br/&
&/form&
使用script标签导入jDataExchange
&script type=&text/javascript& src=&../src/jdataexchange.js&&&/script&
输入表单后编写如下js代码从界面获取数据值填充到json对象中
var jsonObj = {};
jdx(&myform&).get(jsonObj);
调用如上js代码后示例的JSON对象填充如下
&_csrf&: &xxxxxxxx&,
&note&: &xxxxxxxx&,
&name&: &xxxxxxxx&,
&password&: &xxxxxxxx&,
&xxxxxxxx&
&xxxxxxxx&
&fruit&: {
&xxxxxxxx&,
&xxxxxxxx&
&xxxxxxxx&
&country&: {
&xxxxxxxx&
&xxxxxxxx&,
&xxxxxxxx&
将json对象值设置到表单也是在表单加载完成后调用如下js代码
var jsonObj = {...};
jdx(&myform&).set(jsonObj);
****欢迎大家issue和star。
添加了react与PHP使用例子，比react的LinkedStateMixin双向数据绑定代码简单方便。
欢迎大家提issue和star。
CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。
服务器赞助商为
，存储赞助商为
，由提供应用性能服务。
新手搭建 Node.js 服务器，推荐使用无需备案的

我要回帖

更多关于 json数据显示在html 的文章

 

随机推荐