1. jQuery發送AJAX請求
1.1 請求前的準備
1.1.1 HTML頁面
ajaxDemo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 發送 AJAX 請求</title>
<link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet">
<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/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>
</script>
</body>
</html>
說明:
- 點擊GET會用GET的方式向服務器發起請求
- 點擊POST會用POST的方式向服務器發起請求
- 點擊"通用方法ajax（）"會用通用的方式向服務器發起請求
1.1.2 服務端
server.js
//1. 引入express
const express = require('express');
//2. 創建應用物件
const app = express();
//3. 創建路由規則
// request 是對請求報文的封裝
// response 是對回應報文的封裝
//jQuery 服務
app.all('/jquery-server', (request, response) => {
//設定回應頭 設定允許跨域
response.setHeader('Access-Control-Allow-Origin', '*');
// 允許自定義請求頭標簽
response.setHeader('Access-Control-Allow-Headers', '*');
// response.send('Hello jQuery AJAX');
const data = {name: '尚硅谷'};
response.send(JSON.stringify(data));
});
//4. 監聽埠啟動服務
app.listen(8000, () => {
console.log("服務已經啟動, 8000 埠監聽中....");
});
啟動服務端:
1.2 GET方式發送請求
代碼:
ajaxDemo.html 中的script標簽
$('button').eq(0).click(function () {
$.get('http://127.0.0.1:8000/jquery-server', {a: 100, b: 200}, function (data) {
console.log(data);
}, 'json');
});
$.get(url,data,resolve(res),dataType))引數說明:
- url: 請求的路徑，
- data: 請求的引數，以json格式進行，
- resolve(res)請求成功的回呼函式，res是服務器回傳的回應體資料，
- dataType接收回應體資料的格式，一般是“json”格式
執行結果：
1.3 POST方式發送請求
代碼:
ajaxDemo.html 中的script標簽
$('button').eq(1).click(function () {
$.post('http://127.0.0.1:8000/jquery-server', {a: 100, b: 200}, function (data) {
console.log(data);
});
});
$.post(url,data,resolve(res),dataType))引數說明:
- url: 請求的路徑，
- data: 請求的引數，以json格式進行，
- resolve(res)請求成功的回呼函式，res是服務器回傳的回應體資料，
- dataType接收回應體資料的格式，一般是“json”格式
執行結果：
1.4 通用方法ajax（）
代碼:
ajaxDemo.html 中的script標簽
$('button').eq(2).click(function () {
$.ajax({
//url
url: 'http://127.0.0.1:8000/jquery-server',
//引數
data: {a: 100, b: 200},
//請求型別
type: 'GET',
//回應體結果
dataType: 'json',
//成功的回呼
success: function (data) {
console.log(data);
},
//超時時間
timeout: 2000,
//失敗的回呼
error: function () {
console.log('出錯啦!!');
},
//頭資訊
headers: {
c: 300,
d: 400
}
});
});
執行結果：
1.5 補充：
如果出現了以下警告：
這個警告對功能沒有影響，加上crossorigin=“anonymous”
就可以解決，這個的意思是向這個資源發送請求時，將不會攜帶這個域名下的cookie，
解決方案：加上crossorigin=“anonymous”
<link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet">
<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/290448.html
標籤：其他
上一篇：使用 HTML、CSS、JS 和 API 制作一個很棒的天氣 Web 應用程式
下一篇：Ajax異步請求的步驟