mock.js练习--在html中的demo

最新推荐文章于 2023-10-25 09:35:20 发布

啊喔呃i

最新推荐文章于 2023-10-25 09:35:20 发布

阅读量320

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_64298769/article/details/129788431

版权

第一步：新建html文件

第二步：定义div，以及要和mock绑定的id

第三步：链入mock.js

第四步：调用mock方法模拟数据

第五步：ajax请求

代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>mockjs</title>
    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src="http://mockjs.com/dist/mock.js"></script>
  </head>
  <body>
    <div>
      <h1 id="mockjs">请点击该文字之后按F12到console查看数据</h1>
    </div>

    <script type="text/javascript">
      //调用mock方法模拟数据
      Mock.mock("http://mockjs", {
        userName: "@name", //模拟名称
        "age|1-100": 100, //模拟年龄(1-100)
        color: "@color", //模拟色值
        date: "@date('yyyy-MM-dd')", //模拟时间
        url: "@url()", //模拟url
        content: "@cparagraph()",
      });

      //ajax请求
      $("#mockjs").click(function () {
        $.ajax({
          url: "http://mockjs", //请求的url地址
          dataType: "json", //返回格式为json
          data: {}, //参数值
          type: "get", //请求方式

          success: function (req) {
            //请求成功时处理
            console.log(req);
          },
        });
      });
    </script>
  </body>
</html>