<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分类请求</title>
<style>
*{
padding:0;
margin: 0;
}
.main{
width: 500px;
height: 500px;
background: aquamarine;
}
</style>
</head>
<body>
<input type="button" value="演唱会">
<input type="button" value="话剧">
<div class="main">
</div>
<script src="./js/ajax.js"></script>
<script src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock-min.js"></script>
<script>
var btn = document.querySelectorAll("input")
var kind1 = btn[0].value
var kind2 = btn[1].value
var myDiv = document.getElementsByClassName("main")[0]
btn[0].addEventListener("click",function () {
window.get("www.baidu.com",showData,"get",{kind:"live"})
})
btn[1].addEventListener("click",function () {
window.get("www.baidu.com",showData,"get",{kind:"speak"})
})
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","get",function (options) {
console.log(options)
console.log(options.body.kind)
var myKind = 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>
</body>
</html>
ajax.js
window.get= function (url,callback,type,data) {
var type = type.toString().toUpperCase()
var myAjax = new XMLHttpRequest();
myAjax.onreadystatechange = function () {
if(myAjax.readyState ==4 && myAjax.status ==200){
console.log(myAjax.response)
var responseData = JSON.parse(myAjax.response)//将json字符串转换成json对象
callback(responseData)
}else {
// alert("请求失败")
}
}
myAjax.open(type,url,true);
myAjax.send(data)
}
image.png
网友评论