mock.js模拟后端返回json数据简易教程

最新推荐文章于 2024-08-15 10:00:02 发布

WindSearcher

最新推荐文章于 2024-08-15 10:00:02 发布

阅读量1.8k

点赞数

分类专栏： web 文章标签： mock.js

本文链接：https://blog.csdn.net/qq_40511966/article/details/95528666

版权

web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

由于大作业需求，需要前端使用json数据填充，但又不想重写后端(主要是后端业务比较复杂)，所以就想暂时先通过模拟数据来填充，故而选择使用mock.js

我们需要引入mock.js文件,采用cdn引入

js代码

var submit = document.querySelector('.submit')
var img    = document.querySelector('#img')
var arr=['momo','yanzi','ziwei']
var obj={
    'host':'www.baidu',
    'port':'12345',
    'node':'selector'
}

Mock.mock('http://www.bai.com',{
  'url':'https://www.biqukan.com/files/article/image/1/1094/1094s.jpg',
})

submit.addEventListener("click",function(){
    alert("发起请求");
    $.ajax({
        url:'http://www.bai.com',
        dataType:'json',
        success:function(e){
            console.log(e);
            img.src = e.url;

        }
    })
})

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="" method="">
        <input type="button" value="提交" class="submit">
    </form>
    <img src="" id="img">
</body>

<script src="http://mockjs.com/dist/mock.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="js/js.js"></script>
</html>

需要更加深入了解Mock.js

https://blog.csdn.net/qq_42205731/article/details/81705350