原生xhr 請求代碼
get 請求
1 <html lang="en">
2 <head>
3 <meta charset="UTF-8" />
4 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Document</title>
7 </head>
8 <body>
9 <script>
10 let xhr = new XMLHttpRequest();
11 xhr.onload = function () {
12 if (xhr.status >= 200) {
13 console.log(xhr.responseText);
14 }
15 };
16
17 xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks?id=1");
18 xhr.send();
19 xhr.timeout = 3000;
20 xhr.ontimeout = function () {
21 console.log("請求逾時了");
22 };
23
24 xhr.onreadystatechange = function () {
25 if (xhr.readyState == 4 && xhr.status == 200) {
26 console.log(xhr.responseText);
27 }
28 };
29 </script>
30 </body>
31 </html> post 請求
1 <html lang="en">
2 <head>
3 <meta charset="UTF-8" />
4 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Document</title>
7 </head>
8 <body>
9 <script>
10 let xhr = new XMLHttpRequest();
11 xhr.open("POST", "http://www.liulongbin.top:3006/api/addbook");
12 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//----------------------------->注意點 post 請求必須要加請求頭設定屬性
13 const str =
14 "bookname=博人傳可以加&author=阿三三&publisher=浙江圖書出版社";
15 xhr.send(str);
16 xhr.onload = function () {
17 if (this.status == 200) {
18 console.log(this.responseText);
19 }
20 };
21 </script>
22 </body>
23 </html> 原生xhr 請求注意事項
--------------------------------------
ajax 請求代碼
get請求
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
7 <title>Document</title>
8 <script src="./lib/jquery.js"></script>
9 </head>
10
11 <body>
12 <button id="btnGET">發起GET請求</button>
13
14 <script>
15 $(function () {
16 $("#btnGET").on("click", function () {
17 $.ajax({
18 type: "GET",
19 url: "http://www.liulongbin.top:3006/api/getbooks",
20 success: function (res) {
21 console.log(res);
22 },
23 });
24 });
25 });
26 </script>
27 </body>
28 </html> post請求
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
7 <title>Document</title>
8 <script src="./lib/jquery.js"></script>
9 </head>
10
11 <body>
12 <button id="btnPOST">發起POST請求</button>
13
14 <script>
15 $(function () {
16 $("#btnPOST").on("click", function () {
17 $.ajax({
18 type: "POST",
19 url: "http://www.liulongbin.top:3006/api/addbook",
20 data: {
21 bookname: "梁總泡妞日記",
22 author: "梁總",
23 publisher: "梁總的小三們",
24 },
25 success: function (res) {
26 console.log(res);
27 },
28 });
29 });
30 });
31 </script>
32 </body>
33 </html> ajax請求注意事項
--------------------------------------
axios 請求代碼
1 // get請求的參數必須挂載到{ params: { name: "張三", age: 18 }
2 // ------------------發給get請求-------------------
3 document.getElementById("btn").addEventListener("click", function () {
4 axios
5 .get("http://www.liulongbin.top:3006/api/get", {
6 params: { name: "張三", age: 18 },//---------------------------> 注意點 get請求參數必須挂載到params 上面
7 })
8 .then(function (res) {
9 console.log(res.data);
10 });
11 });
12 // ---------------發給POST請求-----------------------------
13 // post 請求
14 let dataParam = { location: "浙江", city: "杭州" };
15 document.getElementById("btn2").addEventListener("click", function () {
16 axios
17 .post("http://www.liulongbin.top:3006/api/post", dataParam)
18 .then(function (res) {
19 console.log(res.data);
20 });
21 });
22 // ------------------axios直接發起get請求-------------------
23 document.getElementById("btn3").addEventListener("click", function () {
24 axios({
25 method: "GET",
26 url: "http://www.liulongbin.top:3006/api/get",
27 params: { name: "張三", age: 18 }, //-------------------> 注意點
28 }).then(function (res) {
29 console.log(res.data);
30 });
31 });
32 // ---------------axios直接發起post請求-----------------------------
33 let dataParam1 = { location: "浙江", city: "杭州" };
34 document.getElementById("btn4").addEventListener("click", function () {
35 axios({
36 method: "POST",
37 url: "http://www.liulongbin.top:3006/api/post",
38 data: dataParam1,//------------------->注意點
39 }).then(function (res) {
40 console.log(res.data);
41 });
42 }); axios 請求注意事項
---------------------------------------
JSONP 請求代碼
1 <button id="btn">發起jsonp請求</button>
2 <script>
3 $(function () {
4 $("#btn").on("click", function () {
5 $.ajax({
6 url: "http://www.liulongbin.top:3006/api/jsonp?address=zs&location=20",
7 // 不要忘記寫這個類型
8 dataType: "JSONP",//-------------------->這個很容易忘記寫
9 jsonp: "callback",
10 jsonpCallback: "abc",
11 success: function (res) {
12 console.log(res);
13 },
14 });
15 });
16 });
17 </script> JSONP請求注意事項
--------------------------------------