无传值时
<!DOCTYPE html>
<html lang="en">
<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/mock.js"></script>
<script src="js/jquery-1.11.0.js"></script>
</head>
<body>
<button>获取数据</button>
<ul>
</ul>
</body>
<script>
Mock.mock("http://www.baidu.com/api.php",{
"list|8-12":[{
'name':"@cname",
'email':"@email"
}]
})
$("button").click(function(){
$.ajax({
type:"post",
dataType:"json",
url:"http://www.baidu.com/api.php",
success:function(data){
var str="";
console.log(data.list)
for(var i=0;i<data.list.length;i++){
str+=`<li>姓名：${data.list[i].name} 邮箱：${data.list[i].email}</li>`
}
$("ul").html(str);
}
})
})
</script>
</html>
注：js文件可以去cdn引入
有传值或自定义内容时
<!DOCTYPE html>
<html lang="en">
<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/mock.js"></script>
<script src="js/jquery-1.11.0.js"></script>
</head>
<body>
<button>获取数据</button>
<ul>
</ul>
</body>
<script>
var Random=Mock.Random
Random.extend({
age:function(data){
var arr=["男","女"]
return this.pick(arr)
}
})
// var data=Mock.mock({
// "list|8-12":[{
// "id|+1":0,
// "name":"@cname",
// "img":"@image(60x60)",
// "address":"@city(true)",
// "age":"@age",
// }]
// })
var data1=Mock.mock({
"list|8-12":[{
"id|+1":0,
"name":"@name",
"address":"@city()",
"img":"@image(30x30)",
"age":"@age",
}]
})
Mock.mock("http://www.baidu.com/api.php","post",function(req){
var id=eval(req.body)
if(id==1){
// return data
return Mock.mock({ //再次点击值替换
"list|8-12":[{
"id|+1":0,
"name":"@cname",
"img":"@image(60x60)",
"address":"@city(true)",
"age":"@age",
}]
})
}else{
return data1 //再次点击值相同
}
})
$("button").click(function(){
$.ajax({
type:"post",
dataType:"json",
url:"http://www.baidu.com/api.php",
data:{id:1},
success:function(data){
var str="";
console.log(data.list)
for(var i=0;i<data.list.length;i++){
str+=`<li>姓名：${data.list[i].name} 性别：${data.list[i].age} 地址：<img src=${data.list[i].img} /></li>`
}
$("ul").html(str);
}
})
})
</script>
</html>