<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jokes</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "test">
<div v-for="item in arr" style="margin:10px">{{item}}</div>
</div>
<script>
let xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 瀏覽器執行代碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//TODO 添加分頁
const app = new Vue({
el: "#test",
data: {
response: "",
arr: [],
},
methods: {
getJokes: function () {
const that = this;
this.getData("https://autumnfish.cn/api/joke/list?num=100", function (result) {
app.response = result;
that.arr = JSON.parse(result).jokes;
})
// "https://autumnfish.cn/api/joke/list?num=10"
},
getData: function (url, success, fail) {
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
if (success) {
success(xmlhttp.responseText)
}
} else {
if (fail) {
fail(xmlhttp.responseText)
}
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
},
postData: function (url, params, success, fail) {
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
if (success) {
// that.arr = JSON.parse(xmlhttp.responseText).jokes;
success(xmlhttp.responseText)
}
} else {
if (fail) {
fail(xmlhttp.responseText)
}
}
};
xmlhttp.open(url, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(params);
}
}
});
document.addEventListener("DOMContentLoaded", function(){
app.getJokes()
});
</script>
</body>
</html>
vue實現顯示笑話列表
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章