通過sql.php把數(shù)據(jù)庫里面的數(shù)據(jù)輸出為json格式的數(shù)據(jù)
得到的文件為test.json
格式如下:
{
"resname":"百度",
"resimg":"http://www.baidu.com/1.jpg",
"resint":"2018-1-18",
"resurl":"http://www.baidu.com/1.apk",
"pageview":"100"
},
{
"resname":"阿里巴巴",
"resimg":"http://www.alibaba.com/1.jpg",
"resint":"2018-1-18",
"resurl":"http://www.alibaba.com/1.apk",
"pageview":"200"
},
{
"resname":"騰訊",
"resimg":"http://www.qq.com/1.jpg",
"resint":"2018-1-18",
"resurl":"http://www.qq.com/1.apk",
"pageview":"300"
},
我想把這些數(shù)據(jù)通過js渲染到index.html頁面中
效果如下:
這是怎么實現(xiàn)的,只要加載index.html就立馬請求test.json
把json里面的數(shù)據(jù)加載到頁面。
2018-1-19 經(jīng)過學習,已經(jīng)解決問題
下面是本人學習后的。
1、首先通過json.php把數(shù)據(jù)庫給輸出為json格式的數(shù)據(jù)
[
{
"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數(shù)據(jù)</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 src="{{r.resimg}}"/></td>
<td>{{r.resint}}</td>
<td><a 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
我用表格來展示了。
直接復制粘貼運行便可看到效果:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tab</title>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
window.onload = function() {
//這里是數(shù)組,若是對象格式僅為循環(huán)方式不同而已
var json = [{
"resname": "百度",
"resimg": "http://www.baidu.com/1.jpg",
"resint": "2018-1-18",
"resurl": "http://www.baidu.com/1.apk",
"pageview": "100"
}, {
"resname": "阿里巴巴",
"resimg": "http://www.alibaba.com/1.jpg",
"resint": "2018-1-18",
"resurl": "http://www.alibaba.com/1.apk",
"pageview": "200"
}, {
"resname": "騰訊",
"resimg": "http://www.qq.com/1.jpg",
"resint": "2018-1-18",
"resurl": "http://www.qq.com/1.apk",
"pageview": "300"
}];
var tmp = "<ul>";
for (var i = 0; i < json.length; i++) {
tmp += "<li>名字:" + json[i].resname + "</li>" +
"<li><img src='" + json[i].resimg + "' /></li>" +
"<li>日期:" + json[i].resint + "</li>" +
"<li><a download href='" + json[i].resurl + "'>" + json[i].resurl + "</a></li>" +
"<li>查看數(shù):" + json[i].pageview + "</li>"
}
tmp += "</ul>";
document.getElementById("box").innerHTML = tmp;
}
</script>
</body>
</html>
溫馨提示,這部分基礎(chǔ)內(nèi)容要多自己學習理解,問問題不如自己學的記得牢
北大青鳥APTECH成立于1999年。依托北京大學優(yōu)質(zhì)雄厚的教育資源和背景,秉承“教育改變生活”的發(fā)展理念,致力于培養(yǎng)中國IT技能型緊缺人才,是大數(shù)據(jù)專業(yè)的國家
北大青鳥中博軟件學院創(chuàng)立于2003年,作為華東區(qū)著名互聯(lián)網(wǎng)學院和江蘇省首批服務(wù)外包人才培訓基地,中博成功培育了近30000名軟件工程師走向高薪崗位,合作企業(yè)超4
中公教育集團創(chuàng)建于1999年,經(jīng)過二十年潛心發(fā)展,已由一家北大畢業(yè)生自主創(chuàng)業(yè)的信息技術(shù)與教育服務(wù)機構(gòu),發(fā)展為教育服務(wù)業(yè)的綜合性企業(yè)集團,成為集合面授教學培訓、網(wǎng)
達內(nèi)教育集團成立于2002年,是一家由留學海歸創(chuàng)辦的高端職業(yè)教育培訓機構(gòu),是中國一站式人才培養(yǎng)平臺、一站式人才輸送平臺。2014年4月3日在美國成功上市,融資1
曾工作于聯(lián)想擔任系統(tǒng)開發(fā)工程師,曾在博彥科技股份有限公司擔任項目經(jīng)理從事移動互聯(lián)網(wǎng)管理及研發(fā)工作,曾創(chuàng)辦藍懿科技有限責任公司從事總經(jīng)理職務(wù)負責iOS教學及管理工作。
浪潮集團項目經(jīng)理。精通Java與.NET 技術(shù), 熟練的跨平臺面向?qū)ο箝_發(fā)經(jīng)驗,技術(shù)功底深厚。 授課風格 授課風格清新自然、條理清晰、主次分明、重點難點突出、引人入勝。
精通HTML5和CSS3;Javascript及主流js庫,具有快速界面開發(fā)的能力,對瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網(wǎng)頁制作和網(wǎng)頁游戲開發(fā)。
具有10 年的Java 企業(yè)應(yīng)用開發(fā)經(jīng)驗。曾經(jīng)歷任德國Software AG 技術(shù)顧問,美國Dachieve 系統(tǒng)架構(gòu)師,美國AngelEngineers Inc. 系統(tǒng)架構(gòu)師。