以下代码根据格式复制粘贴就可以查看效果了,这个方式展示可能比较麻烦,如果有看不太明白或者感到这种方式不喜欢的可以看我其他的博客, 有的我已经记录的很详细了,原文和源码我都放上去了,大家一起进步一起学习

###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:网上找的源码,没有图片的路径才会报错,但是数据以及传递到页面上了

android 网页json数据 网页显示json数据_html

 

本文仅提供参考,是本人闲时所写笔记,如有错误,还请赐教

作者:阿蒙不萌