jQuery mock.js模拟的使用
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mock.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="box"></div>
<script type="text/javascript">
$(function() {
Mock.mock('/mockTest', {
"userInfo|100": \[
{ //生成|num个如下格式名字的数据
"id|+1": 1, //初始值是1每次id都+1
"name": "@cname", //名字为随机中文名字
"age|18-58": 25, //年龄为18-28之间的随机数字
"sex|1": \["男", "女"\], //性别是数组中的一个，随机的
"job|1": \["web", "UI", "python", "php", "java", "go", "ios", "andios", "bootstrap", "jquery", "javascript", "html5", "CSS3"\], //工作是数组中的一个
"img\_info|3":Mock.Random.image('100x100'),
"ListInfo|3":\[{
"img":Mock.Random.image('100x100')
}\]
}
\]
})
//ajax接收数据，通过jq
$.get('/mockTest', function(data) {
console.log(data)
var users = JSON.parse(data);
var html="";
$.each(users.userInfo, function(index,item) {
html += '<div><span>'+item.id+'</span>---'+
' <span>'+item.name+'</span>---'+
' <span>'+item.age+'</span><div>';
})
$(".box").append(html);
})
})
</script>
</body>效果预览：
手机扫一扫
移动阅读更方便
你可能感兴趣的文章