mock随机ajax数据

最新推荐文章于 2025-05-22 23:49:05 发布

ChengCe

最新推荐文章于 2025-05-22 23:49:05 发布

阅读量112

点赞数

本文链接：https://blog.youkuaiyun.com/woshichengce/article/details/98735208

版权

ajax–dome

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
	</head>
	<body>
		<ul class="area">
			
		</ul>
	</body>
	<!-- 需要联网，网址是线上 -->
	<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
        <script src="http://mockjs.com/dist/mock.js"></script>
        <script type="text/javascript">
			
			Mock.mock('abczzzz.json', () => {
			    return Mock.mock({
			        code: '000',
			        "data|3-10": [{
			                "id|+1": 1,
			                "name": "@name",
			                "headImg": "@image(200x200, @color)",
			                "age": '@natural(1, 200)',
			                "intro": '@cparagraph(2)',
			                "city": "@city",
			            }]
			    })
			})
			
			 //ajax请求
			$.ajax({
				url: "abczzzz.json", //请求的url地址(只需要包含.json)
				dataType: "json", //返回格式为json
				async: true, //请求是否异步，默认为异步，这也是ajax重要特性
				data: {}, //参数值
				type: "GET", //请求方式
				beforeSend: function() {},
				success: function(res) {
					if(res.code == 000){
						var html=''
						for(var i=0;i<res.data.length;i++){
							html+='<li>'+res.data[i].intro+'</li>';
						}
						$(".area").html(html)
					}else{
						console.log("状态有误")
					}
				},
				complete: function() {},
				error: function() {}
			});

        </script>
		
</html>