俗話說，九爲數之極，所以就暫不開前端知識總結10了 ，而且JS基礎都快寫到第5篇了，不給個正標題，說不過去吧！別瞎扯了，趕緊開始今天的內容吧：
請求數據一般是使用get、post方法，但是其實還有一些其它的HTTP方法：如put、patch等，今天我們主要講一下get、post方法，如果篇幅不夠就用那些其它的方法來湊吧！
get、post簡要
- get：從指定的資源請求數據
- post：向指定的資源提交要被處理的數據
get、post略詳
get方法
其實在瀏覽器中輸入地址http://host:port/path?key1=value1&key2=value2，然後Enter，這時瀏覽器就發送了get請求到服務器請求數據。
tips：
- GET 請求可被緩存
- GET 請求保留在瀏覽器歷史記錄中
- GET 請求可被收藏爲書籤
- GET 請求不應在處理敏感數據時使用
- GET 請求有長度限制
- GET 請求只應當用於取回數據(當然你想通過鍵值對來傳輸一些數據也行)
post方法
查詢字符串（名稱/值對）是在 POST 請求的 HTTP 消息主體中發送的
POST /test/demo_form.asp HTTP/1.1
Host: w3schools.com
name1=value1&name2=value2
參考文章：HTTP 方法：GET 對比 POST
get、post略略詳
那具體來說，怎麼來✍JS代碼呢？嗯，那我來介紹一些實現get、post的方式吧：
Ajax
要在Ajax中進行HTTP調用，您需要初始化一個新XMLHttpRequest()方法。什麼是XMLHttpRequest()方法呢？
Explain：提供了對 HTTP 協議的完全的訪問，包括做出 POST 和 HEAD 請求以及普通的 GET 請求的能力。-- XML DOM
Ajax - get
const Http = new XMLHttpRequest();
const url = "Server Address";
Http.open("GET", url);
Http.send();
Http.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200) { // 4:請求完成
console.log(Http.responseText);
}
}
// 有沒有發現是不是沒有提 鍵值對，其實呢，鍵值對的信息通過?&拼接在url中了，這波分析，細不細節(hhh)
Ajax - post
類推吧，或是看 參考文章：js原生ajax請求
看到這，YOU MAY BE TK：靠，寫個Ajax - get這麼麻煩，到時候寫代碼豈不要累死？I : 所以有了jQ啊
jQ - get
$(document).ready(function() {
const Url = "Server Address";
$('.btn').click(function() {
$.ajax({
url: Url,
type: "GET",
success: function(res) { // 成功回調方法
console.log(res);
},
error:function(err) {
console.log(err);
}
})
})
})
// 簡易方法
const Url = "Server Address";
$('.btn').click(function() {
$.get(Url, function(data, status) {
if( what is the status ) {
console.log(data);
}
});
});
jQ - post
const Url = "Server Address";
const data = {
name: "SST",
id: 23
};
$('.btn').click(function() {
$.post(Url, data, function(data, status) {
console.log(`${data} and status is ${status}`);
});
});
jQ - get / post
比較規範且實用
const Url = "Server Address";
const data = {
name: "SST",
id: 23
};
$('.btn').click(function() {
$.ajax({
url: Url,
type: "GET/POST",
data: data, // choosable
// dataType is also choosable, there is JSON HTML TXT jsonp...
success: function(res) { // Add Your Logical Code
},
error: function(res) { // Add your Logical Code
}
});
});
小小擴展 Fetch…
Fetch (ES6新特色)
它返回一個Promise ,
const Url = "Server Address";
fetch(Url).then(data => { return data.json(); })
.then(res => { console.log(res); });
const Url = "Server Address";
const Data = {
name: "SST",
id: 23
};
// optional args
const OhterArgs = {
headers: {"content-type":"application/json; charset=UTF-8"},
body: Data,
method: "POST"
};
fetch(Url, OtherArgs)
.then(data => { return data.json(); })
.then(res => { console.log(res); })
.then(error => { console.log(error); })
本來還想說一下Axios的，我發現上面兩段代碼看不懂/(ㄒoㄒ)/~~，連Promise是啥也不清楚，所以我“知難而退”
-------------- end
不足：關於es6新出的fecth還是不太清楚，得跟上技術上的潮流纔行
TODO：去好好學一下Promise 和 fetch相關的知識吧！
(誠心求👍)