千峰jQuery 【Ajax】
GET POST PUT
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
<script src="../jQuery/jQuery.min.js">script>
head>
<body>
<button id="myget">getbutton>
<button id="mypost">postbutton>
<button id="myput">putbutton>
<button id="mypatch">patchbutton>
<button id="mydel">deletebutton>
body>
<script>
$("#myget").click(function () {
$.ajax({
url: "http://localhost:3000/users",
data: {
name: "xiaoming",
},
success: function (res) {
console.log(res);
},
error: function (err) {
console.log(err);
},
});
});
$("#mypost").click(function () {
$.ajax({
url: "http://localhost:3000/users",
data: {
username: "xiaoming",
sex: "woman",
},
method: "POST",
success: function (res) {
console.log(res);
},
error: function (err) {
console.log(err);
},
});
});
$("#myput").click(function () {
$.ajax({
url: "http://localhost:3000/users/4",
data: {
username: "xiaohong",
sex: "woman",
},
method: "PUT",
success: function (res) {
console.log(res);
},
error: function (err) {
console.log(err);
},
});
});
script>
html>
JSON：
{
"users": [
{
"name": "xiaoming",
"sex": "man",
"id": 1
},
{
"name": "xiaoming1",
"sex": "man",
"id": 2
},
{
"name": "xiaoming2",
"sex": "man",
"id": 3
},
{
"username": "xiaohong",
"sex": "woman",
"id": 4
},
{
"username": "xiaoming",
"sex": "woman",
"id": "xao3uwU"
},
{
"username": "xiaoming",
"sex": "woman",
"id": "SHmpbO8"
},
{
"username": "xiaoming",
"sex": "woman",
"id": 5
},
{
"username": "xiaoming",
"sex": "woman",
"id": 6
},
{
"username": "xiaoming",
"sex": "woman",
"id": 7
}
],
"lists": [
"111",
"222",
"333"
]
}
promise写法：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
<script src="../jQuery/jQuery.min.js">script>
head>
<body>
<button id="myget">getbutton>
<button id="mypost">postbutton>
<button id="myput">putbutton>
<button id="mypatch">patchbutton>
<button id="mydel">deletebutton>
body>
<script>
$("#myget").click(function () {
// $.ajax({
// url: "http://localhost:3000/users",
// data: {
// name: "xiaoming",
// },
// })
// .then((res) => {
// console.log(res);
// })
// .catch((err) => {
// console.log(err);
// });
// 简易写法：
$.get(
"http://localhost:3000/users",
{
name: "xiaoming",
}
// function (res) {
// console.log(res);
// }
).then((res) => {
console.log(res);
});
});
$("#mypost").click(async function () {
var res = await $.ajax({
url: "http://localhost:3000/users",
data: {
username: "xiaoming",
sex: "woman",
},
method: "POST",
});
console.log(res);
});
$("#myput").click(function () {
$.ajax({
url: "http://localhost:3000/users/4",
data: {
username: "xiaohong",
sex: "woman",
},
method: "PUT",
success: function (res) {
console.log(res);
},
error: function (err) {
console.log(err);
},
});
});
script>
html>
loading加载：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
<script src="../jQuery/jQuery.min.js">script>
head>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul li {
list-style: none;
padding: 10px;
/* 清除浮动 */
overflow: hidden;
}
img {
width: 200px;
float: left;
}
#loading {
width: 100%;
height: 100%;
display: block;
position: fixed;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.5);
}
/* 也可以找一张动图当做加载 */
#loading div img {
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
margin: auto;
bottom: 0;
right: 0;
font-size: 20px;
}
style>
<script>
$(window).ajaxSend(function () {
console.log("显示loading");
$("#loading").css("display", "block");
});
$(window).ajaxComplete(function () {
console.log("隐藏loading");
$("#loading").css("display", "none");
});
$(window).ready(function () {
console.log("jquery的钩子");
$("#list").empty();
});
script>
<body>
<button id="btn1">第一页button>
<button id="btn2">第二页button>
<button id="btn3">第三页button>
<ul id="list">ul>
<div id="loading">
<div><img src="../img/1.gif" alt="" />div>
div>
body>
<script>
// $(window).ajaxStart(function () {
// console.log("显示loading");
// });
// // 默认显示第一页
// getList(1);
// $(window).ajaxStop(function () {
// console.log("隐藏loading");
// });
// loading可以让用户耐心等待,不再点击按钮,降低服务器的压力
// 默认显示第一页
getList(1);
function getList(num) {
$.ajax({
// 显示loading
url: `https://m.maizuo.com/gateway?cityId=410100&pageNum=${num}&pageSize=3&type=2&k=9539570`,
// 即便不要求同源,后端也会有自己的请求头验证：
headers: {
"X-Client-Info":
' {"a":"3000","ch":"1002","v":"5.2.1","e":"16760061975909780510015489","bc":"410100"}',
"X-Host": " mall.film-ticket.film.list",
},
success: function (res) {
console.log(res.data.films);
render(res.data.films);
//隐藏loading
},
});
}
function render(list) {
var newList = list.map(
(item) => `
${item.poster} "/>
${item.name}
国家：${item.nation}
`
);
$("#list").html(newList.join(" "));
}
$("#btn1").click(function () {
getList(1);
});
$("#btn2").click(function () {
getList(2);
});
$("#btn3").click(function () {
getList(3);
});
script>
html>
钩子函数：
钩子函数