Ajax請求
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax請求</title>
</head>
<body>
<button id="load">加載更多</button>
<div id="photos"></div>
<script>
(() => {
const photos = document.querySelector('#photos')
const loadBtn = document.querySelector('#load')
const url = 'http://api.tianapi.com/meinv/?key=772a81a51ae5c780251b1f98ea431b84&page='
var page = 0
loadBtn.addEventListener('click', (evt) => {
page += 1
// 創(chuàng)建異步請求對象
let xhr = new XMLHttpRequest()
// open方法的第一個參數(shù)是請求類型, 第二個參數(shù)是請求的URL, 第三個參數(shù)必須設(shè)置為true(異步請求)
xhr.open('get', url + page, true)
// 綁定事件回調(diào)函數(shù),在收到服務(wù)器返回的數(shù)據(jù)后要對頁面進(jìn)行局部刷新
xhr.addEventListener('readystatechange', () => {
if (xhr.readyState == 4 && xhr.status == 200) {
// 將返回的JSON字符串解析成JavaScript的對象
let json = JSON.parse(xhr.responseText)
json.newslist.forEach((mm) => {
let img = document.createElement('img')
img.src = mm.picUrl
img.width = '300'
photos.insertBefore(img, photos.firstElementChild)
})
}
})
// 發(fā)送異步請求
xhr.send()
})
})()
</script>
</body>
</html>
AJax請求
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax請求</title>
</head>
<body>
<button id="load">加載更多</button>
<div id="photos"></div>
<script src="js/jquery.min.js"></script>
<script>
$(() => {
const url = 'http://api.tianapi.com/meinv/'
var page = 0
$('#load').on('click', (evt) => {
page += 1
let data = {"key": "772a81a51ae5c780251b1f98ea431b84", "page": page}
$.ajax({
"url": url, // 請求的地址(統(tǒng)一資源定位符)
"type": "get", // 請求的方法(get/post/delete/put)
"data": data, // 發(fā)送給服務(wù)器的數(shù)據(jù)
"dataType": "json", // 服務(wù)器返回的數(shù)據(jù)類型
"headers": {}, // 請求頭
"success": (json) => { // 請求成功后要執(zhí)行的回調(diào)函數(shù)
json.newslist.forEach((mm) => {
$('#photos').prepend($('<img width="300">').attr('src', mm.picUrl))
})
},
"error": (error) => { // 請求失敗后要執(zhí)行的回調(diào)函數(shù)
}
})
// $對象的getJSON方法可以執(zhí)行異步請求(get請求)獲得服務(wù)器返回的JSON格式的數(shù)據(jù)
// 第一個參數(shù)是請求的URL(統(tǒng)一資源定位符)
// 第二個參數(shù)是要發(fā)送給服務(wù)器的數(shù)據(jù)(JSON格式), 如果沒有數(shù)據(jù)發(fā)給服務(wù)器可以省略不寫
// 第三個參數(shù)是請求成功服務(wù)器返回數(shù)據(jù)之后要執(zhí)行的回調(diào)函數(shù), 其參數(shù)為服務(wù)器返回的內(nèi)容處理后的JSON對象
// $.getJSON(url, data, (json) => {
// json.newslist.forEach((mm) => {
// $('#photos').prepend($('<img>').attr('src', mm.picUrl).attr('width', '300'))
// })
// })
})
})
</script>
</body>
</html>
Ajax請求
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax請求</title>
<style>
#emp {
border-collapse: collapse;
}
#emp td, #emp th {
border-bottom: 1px solid black;
width: 120px;
text-align: center;
}
#page {
width: 720px;
text-align: center;
}
#page a {
text-decoration: none;
color: darkcyan;
}
</style>
</head>
<body>
<table id="emp">
<thead>
<tr>
<th>編號</th>
<th>姓名</th>
<th>職位</th>
<th>工資</th>
<th>補(bǔ)貼</th>
<th>所在部門</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="page">
<a id="prev" href="">上一頁</a>
<a id="next" href="">下一頁</a>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(() => {
function getEmpData(url) {
$.ajax({
url: url,
type: 'get',
data: {},
dataType: 'json',
headers: {
"token": "35ad60445cea11e99e1000163e02b646"
},
success: (json) => {
$('#emp>tbody').empty()
json.results.forEach((emp) => {
let tr = $('<tr>')
.append($('<td>').text(emp.no))
.append($('<td>').text(emp.name))
.append($('<td>').text(emp.job))
.append($('<td>').text(emp.sal))
.append($('<td>').text(emp.comm))
.append($('<td>').text(emp.dept.name))
$('#emp>tbody').append(tr)
})
$('#prev').attr('href', json.previous? json.previous : '')
$('#next').attr('href', json.next? json.next : '')
}
})
}
function changePage(evt) {
evt.preventDefault()
let href = $(evt.target).attr('href')
if (href) {
getEmpData(href)
}
}
getEmpData('https://120.77.222.217/api/emps/')
$('#prev').on('click', changePage)
$('#next').on('click', changePage)
})
</script>
</body>
</html>
VUE Ajxa請求
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue入門</title>
<style>
#emp {
border-collapse: collapse;
}
#emp td, #emp th {
border-bottom: 1px solid black;
width: 120px;
text-align: center;
}
#page {
width: 720px;
text-align: center;
}
#page a {
text-decoration: none;
color: darkcyan;
}
</style>
</head>
<body>
<div id="app">
<table id="emp">
<thead>
<tr>
<th>編號</th>
<th>姓名</th>
<th>職位</th>
<th>工資</th>
<th>補(bǔ)貼</th>
<th>所在部門</th>
</tr>
</thead>
<tbody>
<tr v-for="emp in emps">
<td>{{ emp.no }}</td>
<td>{{ emp.name }}</td>
<td>{{ emp.job }}</td>
<td>{{ emp.sal }}</td>
<td>{{ emp.comm }}</td>
<td>{{ emp.dept.name }}</td>
</tr>
</tbody>
</table>
<div id="page">
<a id="prev" v-bind:href=prev>上一頁</a>
<a id="next" v-bind:href=next>下一頁</a>
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
emps: [],
prev: '',
next: ''
},
created() {
fetch('https://120.77.222.217/api/emps/', {
headers: { "token": "35ad60445cea11e99e1000163e02b646" }
})
.then((resp) => { return resp.json() })
.then((json) => {
this.emps = json.results
this.prev = json.prev
this.next = json.next
})
}
})
</script>
</body>
</html>
