一汇恤、使用xhr發(fā)起GET請(qǐng)求
①創(chuàng)建 xhr 實(shí)例對(duì)象
var 對(duì)象名 = new XMLHttpRequest( )
②調(diào)用 xhr.open() 函數(shù)
對(duì)象名.open( "GET" 隔显，"請(qǐng)求的URL地址" )
③調(diào)用 xhr.send( ) 函數(shù)
對(duì)象名.send( )
④監(jiān)聽 xhr.onreadystatechange 事件
對(duì)象名.onreadystatechange = function () {
//監(jiān)聽xhr對(duì)象的請(qǐng)求狀態(tài)：readyState; 服務(wù)器的響應(yīng)狀態(tài)status
if (xhr.readyState === 4 && xhr.status === 200) {
// 獲取服務(wù)器響應(yīng)的數(shù)據(jù)
console.log(xhr.responseText)
}
}
// 1.創(chuàng)建xhr對(duì)象
var xhr = new XMLHttpRequest();
// 2.調(diào)用open函數(shù)
xhr.open('GET',"http://www.liulongbin.top:3006/api/getbooks?id=1")
// 3.調(diào)用send函數(shù)
xhr.send();
// 4.監(jiān)聽函數(shù)
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
console.log(xhr.responseText);
}
}
二、帶有參數(shù)的GET請(qǐng)求
1.用xhr對(duì)象發(fā)起GEt請(qǐng)求時(shí)夭咬，參數(shù)的位置寫到open( ）方法里的URL地址后面。
對(duì)象名.open( "GET" ，" http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游記 " )
2.查詢字符串
定義：在URL地址后面拼接的參數(shù)字符串实抡，叫做查詢字符串
格式：將英文的? 放在URL 的末尾，然后再加上 參數(shù)＝值 欢策，想加上多個(gè)參數(shù)的話吆寨，使用& 符號(hào)進(jìn)行分隔。以這個(gè)形式踩寇，可以將想要發(fā)送給服務(wù)器的數(shù)據(jù)添加到 URL 中啄清。
對(duì)象名.open( "GET" ，" http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游記 " )
3.GET請(qǐng)求攜帶參數(shù)的本質(zhì)
無(wú)論使用 $.ajax()俺孙，還是使用 $.get()辣卒，又或者直接使用 xhr 對(duì)象發(fā)起 GET 請(qǐng)求，當(dāng)需要攜帶參數(shù)的時(shí)候睛榄，本質(zhì)上荣茫，都是直接將參數(shù)以查詢字符串的形式，追加到 URL 地址的后面场靴，發(fā)送到服務(wù)器的啡莉。
4.URL編碼
定義：URL地址中，只允許出現(xiàn)英文相關(guān)的字母旨剥、標(biāo)點(diǎn)符號(hào)咧欣、數(shù)字
編碼原則：使用安全的字符（沒(méi)有特殊用途或特殊意義的可打印字符）表示不安全的字符。
URL編碼原則的通俗理解：使用英文字符去表示非英文字符
5.URL的編碼與解碼
編碼：var str = encodeURI( 字符串 ）
解碼：var str = decodeURI( 字符串 ）
返回值就是編碼或者解碼后的字符串轨帜，可以用str變量接收魄咕。
6.XMLHttpResponse對(duì)象的readyState屬性（面試題）
三、使用xhr對(duì)象發(fā)起post請(qǐng)求
①創(chuàng)建 xhr實(shí)例 對(duì)象
var 對(duì)象名 = new XMLHttpRequest( )
②調(diào)用 xhr.open() 函數(shù)
對(duì)象名.open( "POST" 蚌父，"請(qǐng)求的URL地址" )
③設(shè)置 Content-Type 屬性（固定寫法）
xhr.setRequestHeader('Content-Type' 哮兰， 'application/x-www-form-urlencoded')
注意：如果傳輸文件類型的數(shù)據(jù)，需要修改Content-Type的值苟弛。
④調(diào)用 xhr.send() 函數(shù)喝滞，要發(fā)送的數(shù)據(jù)以查詢字符串的形式作為參數(shù)傳入。
對(duì)象名.send( " id=1&bookname=紅樓夢(mèng)&author=曹雪芹" ）
⑤監(jiān)聽 xhr.onreadystatechange 事件
對(duì)象名.onreadystatechange = function () {
//監(jiān)聽xhr對(duì)象的請(qǐng)求狀態(tài)：readyState; 服務(wù)器的響應(yīng)狀態(tài)status
if (xhr.readyState === 4 && xhr.status === 200) {
// 獲取服務(wù)器響應(yīng)的數(shù)據(jù)
console.log(xhr.responseText)
}
}
// 1.創(chuàng)建xhr對(duì)象
var xhr = new XMLHttpRequest();
// 2.調(diào)用xhr.open()函數(shù)
xhr.open('Post', 'http://www.liulongbin.top:3006/api/addbook')
// 3.設(shè)置Content-Type屬性
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 4.調(diào)用xhr.send()函數(shù)
xhr.send('bookname=水滸傳&author=施耐庵&publisher=上海圖書出版社')
// 5.監(jiān)聽函數(shù)
xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status === 200){
console.log(xhr.responseText);
}
}
四嗡午、數(shù)據(jù)交換格式
1.數(shù)據(jù)交換格式
數(shù)據(jù)交換格式就是服務(wù)器端與客戶端之間進(jìn)行數(shù)據(jù)傳輸與交換的格式囤躁。
前端領(lǐng)域冀痕，常用的兩種數(shù)據(jù)交換格式分別是 XML 和 JSON（重點(diǎn)）荔睹。
2.XML
（1）XML與HTML類似狸演，都是標(biāo)記語(yǔ)言，但是兩者沒(méi)有任何關(guān)系僻他。
（2）XML與HTML對(duì)比：
- HTML 被設(shè)計(jì)用來(lái)描述網(wǎng)頁(yè)上的內(nèi)容宵距，是網(wǎng)頁(yè)內(nèi)容的載體
- XML 被設(shè)計(jì)用來(lái)傳輸和存儲(chǔ)數(shù)據(jù)，是數(shù)據(jù)的載體
（3）XML的缺點(diǎn)：
- XML 格式臃腫吨拗，和數(shù)據(jù)無(wú)關(guān)的代碼多满哪，體積大，傳輸效率低
- 在 Javascript 中解析 XML 比較麻煩
3.JSON
3.1 什么是JSON
JSON 就是 Javascript 對(duì)象和數(shù)組的字符串表示法劝篷。JSON 的本質(zhì)是字符串哨鸭。
3.2 JSON的兩種數(shù)據(jù)結(jié)構(gòu)
JSON 就是用字符串來(lái)表示 Javascript 的對(duì)象和數(shù)組。
3.3 對(duì)象結(jié)構(gòu)
{ "key1" ：value1 娇妓， "key2" ： value2, … }
①數(shù)據(jù)結(jié)構(gòu)為{ "key1" ：value1 像鸡， "key2" ： value2, … }的鍵值對(duì)結(jié)構(gòu)。
②key 必須是使用英文的雙引號(hào)包裹的字符串哈恰，
③value 的數(shù)據(jù)類型可以是數(shù)字只估、字符串、布爾值着绷、null蛔钙、數(shù)組、對(duì)象6種類型荠医。
3.4 數(shù)組結(jié)構(gòu)
[ "java", "javascript", 30, true … ]
數(shù)組中數(shù)據(jù)的類型可以是數(shù)字吁脱、字符串、布爾值子漩、null豫喧、數(shù)組、對(duì)象6種類型幢泼。
3.5 JSON語(yǔ)法注意事項(xiàng)
① 對(duì)象中屬性名必須使用雙引號(hào)包裹
② 字符串類型的值必須使用雙引號(hào)包裹
③ JSON 中不允許使用單引號(hào)表示字符串
④ JSON 中不能寫注釋
⑤ JSON 的最外層必須是對(duì)象或數(shù)組格式
⑥ 不能使用 undefined 或函數(shù)作為 JSON 的值
3.6 JSON字符串與js對(duì)象（數(shù)組）的轉(zhuǎn)換
（1）把js對(duì)象（數(shù)組）換成JSON字符串
JSON.stringify（"數(shù)據(jù)"）
（2）把JSON字符串轉(zhuǎn)換成js對(duì)象（數(shù)組）
JSON.parse（"字符串"）
// 1.將JSON字符串轉(zhuǎn)換成js對(duì)象（數(shù)組）
var jsonStr = '{"name": "吳磊","age":22,"hobby":["打籃球","刺激戰(zhàn)場(chǎng)"]}';
console.log(jsonStr);
var result = JSON.parse(jsonStr);
console.log(result);
// 2.將js對(duì)象（數(shù)組）轉(zhuǎn)換成JSON字符串
var arr = ['你好', 22, null, { name: '吳磊' }];
console.log(arr);
var result2 = JSON.stringify(arr);
console.log(result2);
3.7 序列號(hào)與反序列化
①把數(shù)據(jù)對(duì)象 轉(zhuǎn)換為 字符串的過(guò)程紧显，叫做序列化，例如：調(diào)用 JSON.stringify() 函數(shù)的操作缕棵，叫做 JSON 序列化孵班。
②把字符串 轉(zhuǎn)換為 數(shù)據(jù)對(duì)象的過(guò)程，叫做反序列化招驴，例如：調(diào)用 JSON.parse() 函數(shù)的操作篙程，叫做 JSON 反序列化。
五别厘、封裝自定義Ajax函數(shù)--myAjax( )
1.封裝一個(gè)函數(shù)虱饿，將調(diào)用myAjax( )時(shí)提交的參數(shù)轉(zhuǎn)換成查詢字符串
2.在myAjax( )函數(shù)中：
①創(chuàng)建XMLHttpRequest對(duì)象
②判斷查詢類型是GET還是POST，執(zhí)行不同操作
③創(chuàng)建監(jiān)聽事件onreadystatechange
// 1.準(zhǔn)備工作：封裝函數(shù)，將對(duì)象形式的data數(shù)據(jù)轉(zhuǎn)換成查詢字符串
function resolveData(data) {
var arr = [];
for (let k in data) {
arr.push(k + '=' + data[k]);
}
return arr.join('&');
}
// var obj = { name: '吳磊', age: 22 };
// console.log(resolveData(obj));
// 2.封裝自己的Ajax函數(shù)
// ①創(chuàng)建 xhr 對(duì)象
// ②將參數(shù)轉(zhuǎn)換成查詢字符串
// ③判斷查詢類型氮发，進(jìn)行不同操作
// ④監(jiān)聽 onreadystatechange 事件
function myAjax(options) {
var xhr = new XMLHttpRequest();
var addressStr = resolveData(options.data);
if (options.method.toUpperCase() === 'GET') {
xhr.open(options.method, options.url + '?' + addressStr);
xhr.send();
} else if (options.method.toUpperCase() === 'POST') {
xhr.open(options.method, options.url);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(addressStr);
}
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var result = JSON.parse(xhr.responseText); //將返回的數(shù)據(jù)轉(zhuǎn)換為js對(duì)象
options.success(result); //調(diào)用用戶的success方法渴肉，將返回的數(shù)據(jù)當(dāng)做實(shí)參傳入
}
};
}
// 3.測(cè)試自定義Ajax函數(shù)
myAjax({
method: "get",
url: "http://www.liulongbin.top:3006/api/getbooks",
data: {id:1},
success: function(res){
console.log(res);
}
});
六、XMLHttpRequest Level2的新特性
1. 舊版XMLHttpRequest的缺點(diǎn)
- 只支持文本數(shù)據(jù)的傳輸爽冕，無(wú)法用來(lái)讀取和上傳文件
- 傳送和接收數(shù)據(jù)時(shí)仇祭，沒(méi)有進(jìn)度信息，只能提示有沒(méi)有完成
2.XMLHttpRequest Level2的新功能
①可以設(shè)置 HTTP 請(qǐng)求的時(shí)限
②可以使用 FormData 對(duì)象管理表單數(shù)據(jù)
③可以上傳文件
④可以獲得數(shù)據(jù)傳輸?shù)倪M(jìn)度信息
3.設(shè)置HTTP請(qǐng)求時(shí)限
新版本的 XMLHttpRequest 對(duì)象颈畸，增加了 timeout 屬性乌奇，可以設(shè)置 HTTP 請(qǐng)求的時(shí)限：
xhr對(duì)象.timeout = 3000 （單位是毫秒）
上面的語(yǔ)句，將最長(zhǎng)等待時(shí)間設(shè)為 3000 毫秒眯娱。過(guò)了這個(gè)時(shí)限礁苗，就自動(dòng)停止HTTP請(qǐng)求。
與之配套的還有一個(gè)timeout 事件徙缴，用來(lái)指定回調(diào)函數(shù)：
xhr對(duì)象.ontimeout = function() { }
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks');
// 設(shè)置請(qǐng)求時(shí)限
xhr.timeout = 30;
// 請(qǐng)求超時(shí)后的回調(diào)函數(shù)
xhr.ontimeout = function () {
alert('請(qǐng)求超時(shí)!');
};
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
4.FormData對(duì)象
- Ajax在提交表單數(shù)據(jù)時(shí)寂屏，需要通過(guò)JQuery提供的serialize( )方法快速獲取表單信息。
- 為了方便表單處理娜搂，HTML5 新增了一個(gè) FormData 對(duì)象迁霎，可以模擬表單操作。
（1）手動(dòng)給FormData對(duì)象添加數(shù)據(jù)
①創(chuàng)建FormData實(shí)例
②使用append("屬性名" 百宇，"屬性值" )方法為FormData實(shí)例添加數(shù)據(jù)
③在xhr對(duì)象調(diào)用send()方法時(shí)考廉，直接將FormData實(shí)例傳入。
// 1.創(chuàng)建FormData實(shí)例對(duì)象
var fd = new FormData();
// 2.為實(shí)例對(duì)象添加數(shù)據(jù)
fd.append('username', '吳磊');
fd.append('password', '980903');
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata');
xhr.send(fd);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(JSON.parse(xhr.responseText));
}
};
/* Object
data: {username: "吳磊", password: "980903"}
message: "測(cè)試FormData表單提交成功携御！"
__proto__: Object */
（2）用FormData對(duì)象獲取form表單的數(shù)據(jù) （重點(diǎn)２痢！啄刹！）
var fd = new FormData (form表單對(duì)象 )涮坐；
①在創(chuàng)建FormData實(shí)例時(shí)，直接將form表單的原生DOM對(duì)象傳入誓军，表單數(shù)據(jù)會(huì)自動(dòng)填充到 FormData 對(duì)象中袱讹。(注意！ｊ鞘薄＝莸瘛）
②fd接收到的就是查詢字符串。
③替代了JQuery提供的serialize( )方法壹甥。
④FormData對(duì)象獲取的表單值必須有name屬性救巷。
⑤FormData對(duì)象只支持POST請(qǐng)求，不支持GET請(qǐng)求句柠。
⑥使用FormData對(duì)象發(fā)送POST請(qǐng)求時(shí)浦译，沒(méi)有第三步０艏佟！精盅！千萬(wàn)不能寫Ｏ浴！渤弛！。
$('#f').on('submit', function (e) {
e.preventDefault();
// 創(chuàng)建FormData實(shí)例甚带，自動(dòng)獲取form表單的數(shù)據(jù)
var fd = new FormData(this);
// 發(fā)起POST請(qǐng)求她肯，提交數(shù)據(jù)
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata');
xhr.send(fd);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(JSON.parse(xhr.responseText));
}
};
});
<form action="" id="f">
用戶名：<input type="text" name="username">
密碼：<input type="password" name="password">
<button type="submit">提交</button>
</form>
5.利用FormData對(duì)象上傳文件 （重點(diǎn)！Ｓス蟆Ｇ绨薄）
① 定義 UI 結(jié)構(gòu)
一個(gè)文件選擇框、一個(gè)上傳按鈕碉输、一張圖片
② 驗(yàn)證是否選擇了文件
文件選擇框有一個(gè)files屬性籽前，是一個(gè)數(shù)組，存儲(chǔ)了我們選擇待上傳的文件敷钾。
③ 向 FormData 中追加文件
FormData對(duì)象.append( "屬性名" 枝哄，"文件選擇框數(shù)組[ 0 ]"
④ 使用 xhr 發(fā)起上傳文件的POST請(qǐng)求
使用FormData對(duì)象發(fā)送POST請(qǐng)求時(shí)，沒(méi)有第三步阻荒。挠锥。
<!-- 1.定義UI結(jié)構(gòu) -->
<input type="file" /> <!-- 文件選擇框 -->
<button>上傳</button> <!-- 上傳按鈕 -->
<img src="" alt="" id="img" width="500px" /> <!-- 顯示上傳成功的圖片 -->
<script>
// 2.驗(yàn)證是否選擇了文件
$('button').on('click', function () {
var filesArr = document.querySelector('input').files; //文件選擇框的files屬性是一個(gè)數(shù)組
if (filesArr.length <= 0) {
return alert('請(qǐng)選擇上傳文件');
}
// 3.向FormData對(duì)象追加文件
var fd = new FormData();
fd.append('userFile', filesArr[0]);
// 4.發(fā)起上傳文件的POST請(qǐng)求
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar');
xhr.send(fd);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
// 根據(jù)返回的數(shù)據(jù)判斷文件是否上傳成功
if (data.status === 200) {
$('img').prop('src', 'http://www.liulongbin.top:3006' + data.url);
} else {
console.log('圖片上傳失敗');
}
}
};
});
</script>
6.顯示文件上傳進(jìn)度
（1）新版本的 XMLHttpRequest 對(duì)象中，可以通過(guò)監(jiān)聽 xhr.upload.onprogress 事件侨赡，來(lái)獲取到文件的上傳進(jìn)度蓖租。
（2）事件對(duì)象e有三個(gè)重要屬性：
①e.lengthComputable 是一個(gè)布爾值，表示當(dāng)前上傳的資源是否具有可計(jì)算的長(zhǎng)度
②e.loaded 已傳輸?shù)淖止?jié)
③e.total 需傳輸?shù)目傋止?jié)
（3）在創(chuàng)建xhr對(duì)象之后羊壹，發(fā)送POST請(qǐng)求之前蓖宦，監(jiān)聽上傳進(jìn)度。
// 5.監(jiān)聽上傳進(jìn)度
xhr.upload.onprogress = function (e) {
// e.lengthComputable 是一個(gè)布爾值油猫，表示當(dāng)前上傳的資源是否具有可計(jì)算的長(zhǎng)度
if (e.lengthComputable) {
// e.loaded 已傳輸?shù)淖止?jié)
// e.total 需傳輸?shù)目傋止?jié)
var percentComplete = Math.ceil((e.loaded / e.total) * 100);
console.log(percentComplete);
}
};
7.使用BootStrap渲染進(jìn)度條
①?gòu)?fù)制一個(gè)BootStrap的進(jìn)度條HTML結(jié)構(gòu)
②在監(jiān)聽文件上傳的事件中稠茂，將上傳進(jìn)度賦值給進(jìn)度條。
③POST請(qǐng)求完成后情妖，使用xhr.upload.onload事件可以添加文件上傳成功后的回調(diào)函數(shù)主慰。
<!-- 1.定義UI結(jié)構(gòu) -->
<!-- 文件選擇框 -->
<input type="file" />
<!-- 上傳按鈕 -->
<button>上傳</button>
<!-- BootStrap進(jìn)度條 -->
<div class="progress" style="width: 600px; margin: 10px 50px" >
<div class="progress-bar progress-bar-striped active" style="width: 0" id="percent">
0%
</div>
</div>
<script>
// 2.驗(yàn)證是否選擇了文件
$('button').on('click', function () {
var filesArr = document.querySelector('input').files; //文件選擇框的files屬性是一個(gè)數(shù)組
if (filesArr.length <= 0) {
return alert('請(qǐng)選擇上傳文件');
}
// 3.向FormData對(duì)象追加文件
var fd = new FormData();
fd.append('userFile', filesArr[0]);
var xhr = new XMLHttpRequest();
// 5.監(jiān)聽上傳進(jìn)度
xhr.upload.onprogress = function (e) {
// e.lengthComputable 是一個(gè)布爾值，表示當(dāng)前上傳的資源是否具有可計(jì)算的長(zhǎng)度
if (e.lengthComputable) {
// e.loaded 已傳輸?shù)淖止?jié)
// e.total 需傳輸?shù)目傋止?jié)
var percentComplete = Math.ceil((e.loaded / e.total) * 100);
// 渲染BootStr進(jìn)度條
$('#percent').attr('style', 'width:' + percentComplete + '%');
$('#percent').html(percentComplete + '%');
}
};
// 4.發(fā)起上傳文件的POST請(qǐng)求
xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar');
xhr.send(fd);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
// 根據(jù)返回的數(shù)據(jù)判斷文件是否上傳成功
if (data.status === 200) {
$('img').prop('src', 'http://www.liulongbin.top:3006' + data.url);
} else {
console.log('圖片上傳失敗');
}
}
};
// 6.文件上傳完成后的監(jiān)聽函數(shù)
xhr.upload.onload = function () {
$('#percent')
// 移除上傳中的類樣式
.removeClass()
// 添加上傳完成的類樣式
.addClass('progress-bar progress-bar-success');
};
});
</script>
七鲫售、jQuery實(shí)現(xiàn)文件上傳（與進(jìn)度監(jiān)聽）
還是借助FormData對(duì)象上傳文件共螺。
與上面的區(qū)別：
（1）上面使用XMLHttpRequest對(duì)象發(fā)送POST請(qǐng)求；jQuery必須使用ajax( )方法情竹。
（2）Ajax請(qǐng)求中必須添加以下屬性
contentType: false,
processData: false,
（3）
使用原生js獲取數(shù)組：
var filesArr = document.querySelector('input').files藐不；
使用jQuery：
var filesArr = $('input')[0].files
（4）可以監(jiān)聽Ajax請(qǐng)求開始與結(jié)束的函數(shù)。
$(document).ajaxStart( callback( ) )
$(document).ajaxStop( callback( ) )
<!-- 1.定義UI結(jié)構(gòu) -->
<!-- 文件選擇框 -->
<input type="file" />
<!-- 上傳按鈕 -->
<button>上傳</button>
<script>
// 發(fā)起Ajax請(qǐng)求時(shí)打印內(nèi)容
$(document).ajaxStart(function () {
console.log('發(fā)起了Ajax請(qǐng)求');
});
// Ajax請(qǐng)求結(jié)束時(shí)打印內(nèi)容
$(document).ajaxStop(function () {
console.log('Ajax請(qǐng)求結(jié)束了');
});
// 2.驗(yàn)證是否選擇了文件
$('button').on('click', function () {
var filesArr = $('input')[0].files; //文件選擇框的files屬性是一個(gè)數(shù)組
if (filesArr.length <= 0) {
return alert('請(qǐng)選擇上傳文件');
}
// 3.向FormData對(duì)象追加文件
var fd = new FormData();
fd.append('userFile', filesArr[0]);
var xhr = new XMLHttpRequest();
// 4.發(fā)送POST請(qǐng)求
$.ajax({
method: 'POST',
url: 'http://www.liulongbin.top:3006/api/upload/avatar',
data: fd,
// 不修改 Content-Type 屬性，使用 FormData 默認(rèn)的 Content-Type 值
contentType: false,
// 不對(duì) FormData 中的數(shù)據(jù)進(jìn)行 url 編碼雏蛮，而是將 FormData 數(shù)據(jù)原樣發(fā)送到服務(wù)器
processData: false,
success: function (res) {
console.log(res);
},
});
});
</script>
八涎嚼、axios
axios是一個(gè)只專注于數(shù)據(jù)請(qǐng)求的庫(kù)。
1.使用axios發(fā)起GET請(qǐng)求√舯（$.get( )）
①引入axios.js文件
②
axios.get ( " url " 法梯， { params：{參數(shù)} } ）.then ( callback() )
2.使用axios發(fā)起POST請(qǐng)求 ( $.post( ) )
①引入axios.js文件
②
axios.post ( " url " ， {參數(shù)} ）.then ( callback() )
// 2.使用axios發(fā)起get請(qǐng)求
axios.get('http://www.liulongbin.top:3006/api/get',{params: {id:1}}).then(function(res){
console.log(res.data);
})
// 3.使用axios發(fā)起POST請(qǐng)求
axios.post('http://www.liulongbin.top:3006/api/post',{ location: '北京', address: '順義' }).
then(function(res){
console.log(res.data);
})
3.直接使用axios發(fā)起請(qǐng)求 （ $.ajax( ) ）
axios( {
method："請(qǐng)求類型"犀概，
url: "URL地址"立哑，
data: { POST數(shù)據(jù) } 或者
params: { GET參數(shù) }
} ).then(callback)
// 1.發(fā)起GET請(qǐng)求
axios({
method: 'GET',
url: 'http://www.liulongbin.top:3006/api/get',
params: { id: 1 },
}).then(function (res) {
console.log(res.data);
});
// 2.發(fā)起POST請(qǐng)求
axios({
method: 'POST',
url: 'http://www.liulongbin.top:3006/api/post',
data: { bookname: '列夫托爾斯泰', author: '陰間出版社' },
}).then(function (res) {
console.log(res.data);
});
