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
// 创建异步请求对象
let xhr = new XMLHttpRequest()
// open方法的第一个参数是请求类型, 第二个参数是请求的URL, 第三个参数必须设置为true(异步请求)
xhr.open('get', url + page, true)
// 绑定事件回调函数,在收到服务器返回的数据后要对页面进行局部刷新
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)
})
}
})
// 发送异步请求
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, // 请求的地址(统一资源定位符)
"type": "get", // 请求的方法(get/post/delete/put)
"data": data, // 发送给服务器的数据
"dataType": "json", // 服务器返回的数据类型
"headers": {}, // 请求头
"success": (json) => { // 请求成功后要执行的回调函数
json.newslist.forEach((mm) => {
$('#photos').prepend($('<img width="300">').attr('src', mm.picUrl))
})
},
"error": (error) => { // 请求失败后要执行的回调函数
}
})
// $对象的getJSON方法可以执行异步请求(get请求)获得服务器返回的JSON格式的数据
// 第一个参数是请求的URL(统一资源定位符)
// 第二个参数是要发送给服务器的数据(JSON格式), 如果没有数据发给服务器可以省略不写
// 第三个参数是请求成功服务器返回数据之后要执行的回调函数, 其参数为服务器返回的内容处理后的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>补贴</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>补贴</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>
