以下代碼根據格式復制粘貼就可以查看效果了，這個方式展示可能比較麻煩，如果有看不太明白或者感到這種方式不喜歡的可以看我其他的博客， 有的我已經記錄的很詳細了，原文和源碼我都放上去了，大家一起進步一起學習
###index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src=" js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--根據方法創建一個div盒子模型-->
<div id="project_list">
</div>
<script type="text/javascript">
notice();
function notice(){
// 要注意傳入的路徑
$.ajax("data.json",{
data:{},
dataType:'json',
type:'get',
async:'false',
success:function(data){
var listdata=data.list; //列表數據
if(listdata.length>0){ //項目列表
var listInfo="";
$.each(listdata,function(){
listInfo+="<li class='mui-table-view-cell mui-media'>"+
"<img class='mui-media-object mui-pull-left project-img' src="+this.project_img+">"+
"<div class='mui-media-body'>"+
"<h3 class='project-name'>"+this.project_name+"</h3>"+
"<p class='money-range' class='mui-ellipsis loan-range'>"+this.money_range+"</p>"+
"<p class='loan-rate'>每日百分比"+this.day_rate+"%，應該為"+this.day_limit+"天，"+this.day_person+"人已交"+"</p>"+
"</div>"+
"<div class='loan-more'>"+
"<a href="+this.button_info+" target='' ><button>詳情</button></a>"+
"</div>"+
"</li>";
});
$("#project_list")[0].innerHTML=listInfo;
}
}
// error:function(xhr,type,errorThrown){
// alert("系統繁忙，請聯系管理員");
// }
})
}
</script>
</body>
</html>
###data.json
{
"list":[
{
"project_img":"images/Home-logo1-hua.png",
"project_name":"111",
"money_range":"2000~40000",
"day_rate":"0.04",
"day_limit":"7-90",
"day_person":"1400"
},
{
"project_img":"images/Home-logo2-bao.png",
"project_name":"222",
"money_range":"2000~40000",
"day_rate":"0.04",
"day_limit":"7-90",
"day_person":"1"
}
]
}
ps:網上找的源碼，沒有圖片的路徑才會報錯，但是數據以及傳遞到頁面上了
