ajax
- AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
- AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下,即异步操作。
所有的数据来源于:https://api.apiopen.top/swagger/index.html
JavaScript学习:https://download.csdn.net/download/weixin_51876109/86618380
原生ajax
原生的ajax写法是使用JavaScript中的XMLHttpRequest对象输入参数。
•method:请求的类型;GET 或 POST
•url:文件在服务器上的位置
•async:true(异步)或 false(同步)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<table id="table" class="table table-bordered">
<tr><td>id</td><td>name</td><td>age</td><td>email</td></tr>
</table>
<script>
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState == 4 && xhr.status ==200){
let json = xhr.responseText
let jsondata = JSON.parse(json).students
let table = document.getElementById("table")
for (let i of jsondata) {
let tr = document.createElement("tr")
let id = document.createElement("td")
id.innerHTML += i.id
let name = document.createElement("td")
name.innerHTML+=i.name
let age = document.createElement("td")
age.innerHTML+=i.age
let email = document.createElement("td")
email.innerHTML+=i.email
console.log(i.id)
console.log(i.name)
console.log(i.age)
console.log(i.email)
tr.append(id)
tr.append(name)
tr.append(age)
tr.append(email)
table.append(tr)
}
}
}
xhr.open("GET","http://rap2api.taobao.org/app/mock/238982/api/students",true)
xhr.send()
</script>
</body>
</html>
jquery写法的ajax
使用了jquery框架封装好的ajax
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<meta name="referrer" content="no-referrer">
<title></title>
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div id="mdiv">
</div>
<script>
$().ready(function(){
$("button").click( $.ajax({
url:"https://api.apiopen.top/api/getImages?type=animal&page=0&size=10",
async:true,
dataType:"json",
type:"get",
success:function(responsedata){
let jsondata=responsedata.result.list
for (let s of jsondata) {
let i = "<p>"+s.title+"</p>"+"<img src='"+s.url+"'/>"
$("#mdiv").append(i)
}
}
}))
})
</script>
</body>
</html>
promise对象+jquery的ajax
Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象。
从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。
ES6 规定,Promise对象是一个构造函数,用来生成Promise实例。
学习网址:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- <script src="js/jquery-2.1.0.js"></script> -->
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<table id="table" class="table table-bordered">
<tr>
<td><input type="checkbox" id="box" /></td>
<td>id</td>
<td>name</td>
<td>age</td>
<td>email</td>
<td>操作</td>
</tr>
</table>
<button type="button">更换数据</button>
<script>
$().ready(function() {
let p = new Promise((resolve, reject) => {
$.ajax({
url: "http://rap2api.taobao.org/app/mock/238982/api/students",
async: true,
dataType: "json",
type: "get",
success: function(responsedata) {
resolve(responsedata)
}
})
})
p.then(responsedata => {
let list = responsedata.students
for (let s of list) {
let tr = $("<tr></tr>")
tr.append($("<td><input type='checkbox' class='habit'/></td>"))
tr.append($("<td></td>").text(s.id))
tr.append($("<td></td>").text(s.name))
tr.append($("<td></td>").text(s.age))
tr.append($("<td></td>").text(s.email))
tr.append($("<td></td>").append("<a>查看</a> <a>发送信息</a> <a>退课</a>"))
$("#table tbody").append(tr)
}
})
// $("button").click(function (){
// console.log($("#table").children().first().siblings());
// $("#table tr").not(":first").remove()
// })
$("button").click(function() {
let p = new Promise((resolve, reject) => {
$.ajax({
url: "http://rap2api.taobao.org/app/mock/238982/api/students",
async: true,
dataType: "json",
type: "get",
success: function(responsedata) {
resolve(responsedata)
}
})
})
p
.then(responsedata => {
let list = responsedata.students
// $("#table").children().first().siblings().remove()
$("#table tr").not(":first").remove()
for (let s of list) {
let tr = $("<tr></tr>")
tr.append($("<td><input type='checkbox' class='habit'/></td>"))
tr.append($("<td></td>").text(s.id))
tr.append($("<td></td>").text(s.name))
tr.append($("<td></td>").text(s.age))
tr.append($("<td></td>").text(s.email))
tr.append($("<td></td>").append(
"<a>查看</a> <a>发送信息</a> <a>退课</a>"))
$("#table").append(tr)
}
})
})
$("#box").click(function() {
$(".habit").prop("checked", $("#box").prop("checked"))
})
})
</script>
</body>
</html>