JS把数据库的JSON数据输出渲染到html页面
2018-01-19 12:03
591 查看
1、首先通过json.php把数据库给输出为json格式的数据
[
{
"id":1,
"resname":"百度",
"resimg":"http://www.baidu.com/1.jpg",
"resint":"2018-1-18",
"resurl":"http://www.baidu.com/1.apk",
"pageview":"100"
},
{
"id":2,
"resname":"阿里巴巴",
"resimg":"http://www.alibaba.com/1.jpg",
"resint":"2018-1-18",
"resurl":"http://www.alibaba.com/1.apk",
"pageview":"200"
},
{
"id":3,
"resname":"腾讯",
"resimg":"http://www.qq.com/1.jpg",
"resint":"2018-1-18",
"resurl":"http://www.qq.com/1.apk",
"pageview":"300"
}
]然后通过vue.js来解析
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>VUE解析JSON数据</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="main">
<table border=1>
<tr>
<td>ID</td>
<td>资源名称</td>
<td>LOGO</td>
<td>更新时间</td>
<td>下载地址</td>
<td>阅读量</td>
</tr>
<tr v-for="r in rows">
<td>{{r.id}}</td>
<td>{{r.resname}}</td>
<td><img v-bind:src="r.resimg"/></td>
<td>{{r.resint}}</td>
<td><a v-bind:href="r.resurl">点击下载</a></td>
<td>{{r.pageview}}</td>
</tr>
</table>
</div>
</body>
<script>
$(document).ready(function () {
$.getJSON("data.json", function (result, status) {
var v = new Vue({
el: '#main',
data: {
rows: result
}
})
});
});
</script>
</html>
最终运行index.html
demo:http://wxpad.cn/yunpan/cdn/json/json.html
[
{
"id":1,
"resname":"百度",
"resimg":"http://www.baidu.com/1.jpg",
"resint":"2018-1-18",
"resurl":"http://www.baidu.com/1.apk",
"pageview":"100"
},
{
"id":2,
"resname":"阿里巴巴",
"resimg":"http://www.alibaba.com/1.jpg",
"resint":"2018-1-18",
"resurl":"http://www.alibaba.com/1.apk",
"pageview":"200"
},
{
"id":3,
"resname":"腾讯",
"resimg":"http://www.qq.com/1.jpg",
"resint":"2018-1-18",
"resurl":"http://www.qq.com/1.apk",
"pageview":"300"
}
]然后通过vue.js来解析
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>VUE解析JSON数据</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="main">
<table border=1>
<tr>
<td>ID</td>
<td>资源名称</td>
<td>LOGO</td>
<td>更新时间</td>
<td>下载地址</td>
<td>阅读量</td>
</tr>
<tr v-for="r in rows">
<td>{{r.id}}</td>
<td>{{r.resname}}</td>
<td><img v-bind:src="r.resimg"/></td>
<td>{{r.resint}}</td>
<td><a v-bind:href="r.resurl">点击下载</a></td>
<td>{{r.pageview}}</td>
</tr>
</table>
</div>
</body>
<script>
$(document).ready(function () {
$.getJSON("data.json", function (result, status) {
var v = new Vue({
el: '#main',
data: {
rows: result
}
})
});
});
</script>
</html>
最终运行index.html
demo:http://wxpad.cn/yunpan/cdn/json/json.html
相关文章推荐
- Vue入门学习-使用服务器传来的JSON数据交给Vue渲染HTML页面
- 用JS循环数据库数据并输出到html中
- js-管理你的html字符串,并渲染简单的json数据
- ajax根据ID查询数据库并返回Json格式数据返回js,使用append显示到页面。判断json值为[]或者[[]]的问题。
- HTML页面调用JS代码将JSON数据导入到Excel表中,并下载 实例
- 2017精华版:jquery 中 ajax,后台获取数据库json数据,显示在html页面 02
- 在html页面上使用ajax传递json数据到基于express框架(node.js)的服务器
- html中用js格式化JSON输出
- JQuery和原生JS跨域加载JSON数据或HTML。
- 在JSP页面中输出JSON格式数据
- 通过JS、JQ,实现对json数据调取,并循环展示到页面
- js模版引擎(基于html模版和json数据的javascript交互)(第二讲)完结篇
- 关于Java语言的eclipse读取数据库,并将数据转换成JSON格式输出
- js解析json并生成html页面
- MVC4中AJAX Html页面打开调用后台方法实现动态加载数据库中的数据
- 使用所见即所得文本编辑器编辑文本存入数据库后通过ajax获取服务器json_encode的数据到前台,文本内容上边的html标签不解析
- django之创建第8-1个项目-数据库之增删改查/数据库数据显示在html页面
- js声明数组、对象在jsp页面中(获得ajax得到json数据)
- 将后台数据(C#)转换成JSON字符串传到页面转换成json对象存储在JS中
- 关于页面js输出数组数据时出现‘,’的问题