Easy Mock&Ajax请求数据

mock网站
https://www.easy-mock.com/login

mock数据

法一

{
        "live|5": [{
            name: "@cname",
            "id|+1": 1000,
            img: "@img('200x100',@color,@title)",
            city: "@city",
            date: "@Date(yyyy-MM-dd)"
        }],
        "speak|2": [{
            name: "@cname",
            "id|+1": 1000,
            img: "@img('200x100',@color,@title)",
            city: "@city",
            date: "@Date(yyyy-MM-dd)"
        }],
    }


法二


{
  "data": {
    "user": [
      {
        "name": "孔秀兰",
        "id": 1000,
        "img": "http://dummyimage.com/200x100/姜霞",
        "zum": "级应可更地先解日采如斯达办些积人写。照照采件的石断受类金难风。半整经共建步示象业育高世效较特参去产。",
        "city": "新余市",
        "b": "2005-19-03"
      },
      {
        "name": "侯涛",
        "id": 1001,
        "img": "http://dummyimage.com/200x100/薛磊",
        "zum": "清外今须分毛商打效型听产管论向。响三低准近每克按林少理划没太。",
        "city": "河源市",
        "b": "2007-11-01"
      },
      {
        "name": "梁娜",
        "id": 1002,
        "img": "http://dummyimage.com/200x100/汤刚",
        "zum": "越省求更素个见个太第养感上情格层验每。红业名你门先地联列增引样织火流。阶难器样济证立断业整该前利革。",
        "city": "六盘水市",
        "b": "1988-08-05"
      },
      {
        "name": "龚军",
        "id": 1003,
        "img": "http://dummyimage.com/200x100/刘杰",
        "zum": "持土条压科达小层容被理则段共就线厂。国二深社五要因年准却物打始路。",
        "city": "怀化市",
        "b": "2004-42-21"
      },
      {
        "name": "田秀兰",
        "id": 1004,
        "img": "http://dummyimage.com/200x100/贺刚",
        "zum": "整家口却个江克还心法行示始专已两石科。求构马着题越议共放色光习条几条。",
        "city": "来宾市",
        "b": "1971-40-28"
      },
      {
        "name": "姚娜",
        "id": 1005,
        "img": "http://dummyimage.com/200x100/杨强",
        "zum": "际非越油压算日整叫收内干千。状道及何着必精题为局争越热研每去。",
        "city": "荆门市",
        "b": "1998-57-19"
      },
      {
        "name": "余杰",
        "id": 1006,
        "img": "http://dummyimage.com/200x100/傅涛",
        "zum": "转行别较认号心求调的准科布。取清共阶完联现收会民志几力个作。社下矿养明老议样任南层拉。",
        "city": "肇庆市",
        "b": "1973-24-09"
      },
      {
        "name": "雷芳",
        "id": 1007,
        "img": "http://dummyimage.com/200x100/贺磊",
        "zum": "局八正年从深成查县油种整眼对位或严。毛圆化对她建调局看之下须。反目其给线对气等持组你现共子身图。",
        "city": "澳门半岛",
        "b": "1987-34-09"
      },
      {
        "name": "郑刚",
        "id": 1008,
        "img": "http://dummyimage.com/200x100/刘涛",
        "zum": "响把知院局证青任最段向马布广料。头素亲京必第达及除般志思品置容事。样走地工石事圆流劳传里况光离。",
        "city": "上海市",
        "b": "2005-39-28"
      },
      {
        "name": "沈秀兰",
        "id": 1009,
        "img": "http://dummyimage.com/200x100/毛洋",
        "zum": "结林和何北节音委名想无性容军矿。由社题然山深算名百按求八示断中体基。光志因位而细图声回计强始节布办们。",
        "city": "海西蒙古族藏族自治州",
        "b": "2017-25-23"
      }
    ]
  }
}

 style
        *{
            padding:0;
            margin: 0;
        }
        .main{
            width: 500px;
            height: 500px;
            background: aquamarine;
        }

<input type="button" value="演唱会">
<input type="button" value="话剧">

<div class="main">

</div>

axios 封装了所有的Ajax请求 基本格式 .then()表示请求完成后接下的操作 接受一个回调函数（回调函数的参数一般为返回值）
axios.请求方式("api地址",{有传参时写传餐，否则不写}).then((res)=>{console.log(res)}).catch((err)=>{console.log(err)})//请求失败时候调用的函数

<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
<script src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock-min.js"></script>
<script>
    // axios.post("www.baidu.com",{kind:"live"})
    //axios 封装了所有的Ajax请求 基本格式       .then()表示请求完成后接下的操作 接受一个回调函数（回调函数的参数一般为返回值）
    // axios.请求方式("api地址",{有传参时写传餐，否则不写}).then((res)=>{console.log(res)}).catch((err)=>{console.log(err)})//请求失败时候调用的函数


    var btn = document.querySelectorAll("input")
    var kind1 = btn[0].value
    var kind2 = btn[1].value
    var myDiv = document.getElementsByClassName("main")[0]
    //axios 结合mock使用时 当需要传参数的时候 需要用POST请求
    btn[0].addEventListener("click",function () {
        axios.post("www.baidu.com",{kind:"live"}).then((res)=>{
            console.log("112211221")
            console.log(res)
            showData(res.data)
        }).catch((err)=>{console.log(err)})
    })
    btn[1].addEventListener("click",function () {
        axios.post("www.baidu.com",{kind:"speak"}).then(function (res) {
            showData(res.data)
        })
    })

    
    function showData(data) {
        var str = ""
        data.forEach((item)=>{
            str+=`<img src="${item.img}"><p>${item.name}</p><p>${item.date}</p> <p>${item.city}</p>  `
        })
        myDiv.innerHTML = str
    }

Mock.mock("www.baidu.com","post",function (options) {
    console.log(options)
    console.log(options.body.kind)
    var myKind =JSON.parse(options.body).kind
    var myData = Mock.mock({
        "live|5": [{
            name: "@cname",
            "id|+1": 1000,
            img: "@img('200x100',@color,@title)",
            city: "@city",
            date: "@Date(yyyy-MM-dd)"
        }],
        "speak|2": [{
            name: "@cname",
            "id|+1": 1000,
            img: "@img('200x100',@color,@title)",
            city: "@city",
            date: "@Date(yyyy-MM-dd)"
        }],
    })
    if(myKind == "live"){
        return myData.live
    }else{
        return myData.speak
    }
})
</script>