🥔：你一定能成為想要成為的人
發送AJAX請求不同方式
- 發送AJAX請求不同方式
- 1、jQuery發送AJAX請求
- 2、axios發送AJAX請求（重點）
- 3、fetch發送AJAX請求
發送AJAX請求不同方式
1、jQuery發送AJAX請求
首先需要jquery的js文件，資源路徑：jquery (v3.6.4) - jQuery 是一個高效、精簡并且功能豐富的 JavaScript 工具庫。它提供的 API 易于使用且兼容眾多瀏覽器，這讓諸如 HTML 文檔遍歷和操作、事件處理、動畫和 Ajax 操作更加簡單。 | BootCDN - Bootstrap 中文網開源項目免費 CDN 加速服務
使用jQuery發送get、post、和自定義請求頭：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><linkcrossorigin="anonymous"href="https://cdn.bootcdn.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script></head><body><div class="container"><h2 class="page-header">jQuery發送AJAX請求</h2><button class="btn btn-primary">GET</button><button class="btn btn-danger">POST</button><button class="btn btn-info">通用型方法ajax</button></div><script>//GET請求$("button").eq(0).click(function () {$.get("http://127.0.0.1:8000/jquery-server",{//參數a: 100,b: 1000,},function (data) {//響應體console.log(data);},"json"); //返回JSON類型});//POST請求$("button").eq(1).click(function () {$.post("http://127.0.0.1:8000/jquery-server",{a: 100,b: 1000,},function (data) {//響應體console.log(data);});});//通用型方法ajax$("button").eq(2).click(function () {$.ajax({//請求類型type: "GET",//urlurl: "http://127.0.0.1:8000/jquery-server",//參數data: { a: 100, b: 200 },//響應體結果設置dataType: "json",//成功的回調success: function (data) {console.log(data);},//超時時間timeout: 2000,//失敗的回調error: function () {console.log("出錯了!");},//頭信息設置headers: {name: "lw",password: "lww",},});});</script></body>
</html>
server.js:
//jQuery服務
app.all("/jquery-server", (request, response) => {//設置響應頭 設置允許跨域response.setHeader("Access-Control-Allow-Origin", "*");//設置響應頭 設置允許接收自定義請求頭response.setHeader("Access-Control-Allow-Headers", "*");//設置響應const data = { name: "haha" };response.send(JSON.stringify(data));
});
2、axios發送AJAX請求（重點）
首先需要jquery的js文件，資源路徑：點擊此處
安裝axios: 腳手架目錄npm i axios
先配置服務端，類型改成all，然后允許接收自定義請求頭
//axios服務
app.all("/axios-server", (request, response) => {//設置響應頭 設置允許跨域response.setHeader("Access-Control-Allow-Origin", "*");//設置響應頭 設置允許接收自定義請求頭response.setHeader("Access-Control-Allow-Headers", "*");//設置響應const data = { name: "haha" };response.send(JSON.stringify(data));
});
axios發送請求成功的值是一個封裝好的響應對象：
我們想要的響應數據藏在response.data中
我們使用axios發送GET請求、POST請求和通用請求：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>axios發送AJAX請求</title><linkcrossorigin="anonymous"href="https://cdn.bootcdn.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/><scriptcrossorigin="anonymous"src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.min.js"></script></head><body><button>GET</button><button>POST</button><button>AJAX</button><script>const btns = document.querySelectorAll("button");//配置baseURLaxios.defaults.baseURL = "http://127.0.0.1:8000";//GET請求btns[0].onclick = function () {//GET請求axios.get("/axios-server", {//url參數params: {id: 100,vip: 7,},//請求頭信息headers: {name: "xixi",age: 18,},}).then((value) => {console.log("全部響應結果:", value);console.log("響應狀態碼:", value.status);console.log("響應狀態字符串:", value.statusText);console.log("響應頭信息:", value.headers);console.log("響應體:", value.data);});};//POST請求btns[1].onclick = function () {axios.post("/axios-server",{//請求體username: "admin",password: "admin",},{//url參數params: {id: 200,vip: 8,},//請求頭信息headers: {name: "heihei",age: 20,},});};//axios發送通用請求btns[2].onclick = function () {axios({//請求方法method: "POST",//urlurl: "axios-server",//url參數params: {id: 300,vip: 9,},//請求頭信息headers: {name: "hehe",age: 21,},//請求體參數data: {username: "admin",password: "admin",},}).then((response) => {console.log("全部響應結果:", response);console.log("響應狀態碼:", response.status);console.log("響應狀態字符串:", response.statusText);console.log("響應頭信息:", response.headers);console.log("響應體:", response.data);});};</script></body>
</html>
- 注意看他們之間的區別，多去瀏覽器f12查看他們信息分別放在哪。
3、fetch發送AJAX請求
fetch優點：它不像jquery和axios需要引入第三方庫，它直接就能用，它就在window的內置對象中，直接就能用調用fetch函數。
fetch缺點：那就是返回的數據需要包兩層promise，還有就是IE不兼容fetch。
server.js:
//fetch服務
app.all("/fetch-server", (request, response) => {//設置響應頭 設置允許跨域response.setHeader("Access-Control-Allow-Origin", "*");//設置響應頭 設置允許接收自定義請求頭response.setHeader("Access-Control-Allow-Headers", "*");//設置響應const data = { name: "haha" };response.send(JSON.stringify(data));
});
fetch發送請求：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>fetch發送AJAX請求</title></head><body><button>AJAX請求</button><script>const btn = document.querySelector("button");btn.onclick = () => {fetch("http://127.0.0.1:8000/fetch-server?a=1&b=2", {//請求方法method: "POST",//請求頭headers: { name: "www" },//請求體body: {username: "www",password: "123",},}).then((response) => {return response.json(); //把json字符串轉換為js對象}).then((response) => {//第二個then處理上一個返回的正確結果console.log(response);});};</script></body>
</html>
