ajax模擬呼叫json資料（列表頁）
<li>
<a href="#">
<div class="fl news-pic animated slideInLeft"><img src="../images/home_list_05.jpg"/></div>
<div class="fr news-content animated slideInRight">
<div class="news-title">悅家美·悅之家釋出新戰略 開啟中國O2O新供應鏈流通落地新紀元
</div>
<div class="news-date">2017-11-20</div>
<div class="news-des">由中國市場學會流通專業委員會作為課題指導單位的“悅家美·悅之家O2O新供應鏈流通落地服務創
新模式論證報告新聞釋出會暨2018戰略研討會”在中央電視臺梅地亞新聞中心正式召開。
</div>
<div class="more">檢視詳情 ></div>
</div>
</a>
</li>
<script>
$(function(){
$.ajax({
url:"../mock/newList.json",
success:function(msg){
console.log(msg);
var li = "";
var data = msg.data.list;
for(var i in data){
li += '<li>';
li += '<a href="'+data[i].url+'">';
li += '<div class="fl news-pic animated slideInLeft"><img src="'+data[i].img+'"/></div>';
li += '<div class="fr news-content animated slideInRight">';
li += '<div class="news-title">'+data[i].title+'</div>';
li += '<div class="news-date">'+data[i].time+'</div>';
li += '<div class="news-des">'+data[i].detail+'</div>';
li += '<div class="more">檢視詳情 ></div>';
li += '</div>';
li += '</a>';
li += '</li>';
}
$(".news-lists ul").html(li);
}
});
});
</script>
html：
<div class="hot-title"><span class="ch-title">熱門新聞</span> <span class="en-title">Hot News</span></div>
<div class="hot-news">
<div class="news-img hotNews-image"></div>
<p class="hotNews-title"></p>
</div>
<div class="right-news">
<ul></ul>
</div>
<script>
// 熱門頭調新聞一
$.ajax({
url: '../mock/newList.json',
success:function (data) {
newsLisy(data.data.hyzx)
}
})
// 熱門新聞渲染一
function newsLisy (data) {
var newsImage = '<a href="'+data[0].url+'"><img src="'+data[0].img+'" /></a>';
$('.hot-news .news-img').html(newsImage)
$('.hot-news .hotNews-title').html('<a href="'+data[0].url+'">' + data[0].title + '</a>')
var list = data.slice(1);
var listStr = '';
for (var i = 0; i< list.length; i++) {
listStr += '<li><p><a href="'+list[i].url+'">'+list[i].title+'</a></p></li>'
}
$('.right-news ul') .html(listStr);
}
</script>
<script>
// 熱門頭調新聞二
$.ajax({
url: '../mock/newList.json',
success:function (hyzx) {
var hyzx = data.data.hyzx;
var newsImage = '< a href="'+hyzx[0].url+'">< img src="'+hyzx[0].img+'" /></ a>';
$('.hot-news .news-img').html(newsImage)
$('.hot-news .hotNews-title').html('< a href="'+hyzx[0].url+'">' + hyzx[0].title + '</ a>')
var list = hyzx.slice(1);
var listStr = '';
for (var i = 0; i< list.length; i++) {
listStr += '<li><p>< a href="'+list[i].url+'">'+list[i].title+'</ a></p ></li>'
}
$('.right-news ul') .html(listStr);
}
})
</script>
{
"data":{
"list":[
{
"title":"悅平臺全國實體服務中心悅之家第一屆店長訓圓滿落幕",
"time":"2017-11-10",
"img": "../images/news08.jpg",
"detail":"2017年11月10日，為期3天的悅花越有全國實體服務中心悅之家第一屆店長訓圓滿落幕，這代表了340",
"url":"list_aticle.html?news=0"
},
{
"title":"悅家美•悅之家釋出新戰略 開啟中國O2O新供應鏈流通落地新紀元",
"time":"2017-11-27",
"img": "../images/news09.jpg",
"detail":"2017年11月27日，由中國市場學會流通專業委員會作為課題指導單位的“悅家美•",
"url":"list_aticle.html?news=1"
}
],
"hyzx":[
{
"title":"《世界電子商務報告》稱中國成全球最大電子商務市場",
"time":"2018-04-21",
"img": "../images/22.jpg",
"detail":"近日，中國國際電子商務中心首次對外發布《世界電子商務報告》（以下簡稱報告）",
"url":"hyzx_aticle.html?news=0",
"origin":"中國產業經濟資訊網"
},
{
"title":"李克強：對電子商務、移動支付實行包容審慎監管",
"time":"2017-06-27",
"img": "",
"detail":"2017年夏季達沃斯論壇6月27日至29日在大連舉行，本屆論壇的主題是",
"url":"hyzx_aticle.html?news=1",
"origin":"新華網"
},
{
"title":"李克強：五年來全社會研發投入規模躍居世界第二位",
"time":"2018-03-05",
"img": "../images/news30.png",
"detail":"五年來，創新驅動發展成果豐碩。全社會研發投入年均增長11%，規模躍居世界第二",
"url":"hyzx_aticle.html?news=2",
"origin":"中國新聞網"
},
{
"title":"商務部：電商示範基地及企業評價工作將開展",
"time":"2018-04-09",
"img": "",
"detail":"4月9日訊息，今日，商務部發布《商務部辦公廳關於開展國家電子商務示範基。",
"url":"hyzx_aticle.html?news=3",
"origin":"悅花越有集團"
}
],
"xxzq":[
{
"title":"悅視訊4月份計劃表",
"time":"2018-03-03",
"person":"公告包含：悅視訊4月份全部計劃",
"url":"xxzq_aticle.html?news=0"
},
{
"title":"悅之家雲會議安裝指南",
"time":"2018-02-02",
"person":"悅之家雲會議平臺是基於當下最為先進的雲端計算技術開發的雲會議視訊架構平臺。",
"url":"xxzq_aticle.html?news=1"
}
]
}
}