資訊專欄INFORMATION COLUMN
摘要：傳參并不是很難的事，但有時(shí)牽扯到例如要傳一個對象或者到后端的時(shí)候就會有些麻煩，在這里總結(jié)一些使用方法。在中可以通過設(shè)定來解決在中就比較難設(shè)定，參見錯誤之處或者更多方案歡迎提出，謝謝
傳參并不是很難的事，但有時(shí)牽扯到例如要傳一個對象或者form到后端的時(shí)候就會有些麻煩，在這里總結(jié)一些使用方法。
首先先介紹發(fā)送請求時(shí)我們經(jīng)常會混淆的幾個屬性：
dataType: 期待服務(wù)器返回的數(shù)據(jù)格式
mimeType: 告訴說如何處理服務(wù)器返回的數(shù)據(jù)格式，這樣browser就會進(jìn)行相應(yīng)的處理, 例如，設(shè)定類型為"Text/html"，那么client端就知道說，這是一個HTML的文檔，我直接呈現(xiàn)出來就可以了；如果說是“Application/pdf”，那么client端就會知道說需要啟動PDF閱讀器插件去呈現(xiàn)內(nèi)容。
contentType： 是指你所要發(fā)送的數(shù)據(jù)類型，例如“application/json;charset=utf-8”就是很常見的類型， 而“application/x-www-form-urlencoded; charset=UTF-8”是默認(rèn)類型。
另外，比較一下Request Payload和Form的方式有何區(qū)別：
Request Payload需要設(shè)定Content-Type:application/json
在chrome developer tool里你會看到他傳遞的是一個Object/json，注意到里面還包含了數(shù)組，假如你是通過ajax提交的請求，瀏覽器只是顯示出你通過Payload body提交的內(nèi)容，瀏覽器并不知道資料是從哪里來的
Form形式的需要設(shè)定Content-Type: application/x-www-form-urlencoded 或者 Content-Type: multipart/form-data，通過developer tool看到的是這樣的，這種情況下form-data就是Request payload，瀏覽器知道什么鍵對應(yīng)什么值，所以他是以xx=xx的形式展現(xiàn)的，要注意的是，數(shù)組被轉(zhuǎn)成了字串。
因此，當(dāng)你需要傳的資料僅僅是鍵值對，用Form的形式足以，如果需要傳遞的是復(fù)雜結(jié)構(gòu)的（例如有嵌套的數(shù)組，對象），用RequestPayload比較合適。
接下來讓我們比較一下各種傳參情況~第一種情況，傳普通字串
JQuery:
let params = {
a: 1,
b: 2
}
// 第一種方法:
$.ajax({
"dataType": "json",
"type": "GET",
"url": "your_request?" + $.param(params)
})
//第二種方法:
$.ajax({
"type": "GET",
"url": "your_request",
"data": params
})
AngularJS:
var conf = {
method: "GET",
url: "your_request",
params: {
a: 1,
b: 2
}
};
$http(conf).then(function(response){
console.log(response.data);
}, function(){
console.log("error");
}).finally(function(){
console.log("finally");
});
第二種情況：Post form data
JQuery:
let params = {
a: 1,
b: 2,
ary1: [3,4,5]
}
$.ajax({
"type": "POST",
"url": "your_request",
"data": params
})
AngularJS:
注意data需要被轉(zhuǎn)換成URL-encoded字串
ContentType需要設(shè)定為"application/x-www-form-urlencoded"指定傳送的數(shù)據(jù)格式為Form
var conf = {
method: "POST",
url: "your_request",
data: $.param({
c: 3,
d: 4
}),
headers: {"Content-Type": "application/x-www-form-urlencoded"}
};
第三種情況：使用RequestPayload進(jìn)行Post參數(shù)
JQuery:
設(shè)定contentType為“application/json”,并且將params序列化
let params = {
a: 1,
b: 2,
ary1: [3,4,5]
}
$.ajax({
"type": "POST",
"url": "your_request",
"data": JSON.stringify(params),
"contentType": "application/json"
})
AngularJS:
var conf = {
method: "POST",
url: "your_request",
data: {
c: 3,
d: 4
}
};
有時(shí)，當(dāng)服務(wù)器返回response是null，在火狐里會出現(xiàn)xml解析錯誤，是因?yàn)榛鸷J(rèn)使用xml解析服務(wù)器返回值，而遇到null返回值時(shí)，發(fā)生了解析錯誤。
在JQuery中可以通過設(shè)定mimeType來解決
$.ajax({
"dataType": "json",
"type": "GET",
"url": "your_request",
"mimeType": "json"
})
在AngularJS中就比較難設(shè)定mimeType，參見：https://github.com/angular/an...
錯誤之處或者更多方案歡迎提出，謝謝！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94979.html
A網(wǎng)站訪問B網(wǎng)站這就是跨域 當(dāng)你調(diào)用接口時(shí)，F(xiàn)12控制臺拋出這狀態(tài)時(shí)，你就跨域了（圖示） showImg(https://segmentfault.com/img/bVE8yG?w=867&h=44); 如何解決跨域呢？ 解決的幾種方法（我現(xiàn)在只用到了這兩種） JSONP 讓后臺的小伙伴設(shè)置header：如PHP的 header{Access-Control-Allow-Origin: *} ...
流行框架 簡介 angularjs是一款非常優(yōu)秀的前端高級JS框架，由谷歌團(tuán)隊(duì)開發(fā)維護(hù)，能夠快速構(gòu)建單頁web應(yīng)用，化繁為簡 無論是angularjs還是jQuery都是用原生JS封裝的 庫：對代碼進(jìn)行封裝，調(diào)用封裝的方法，簡化操作 傳統(tǒng)方式是用get方式獲取元素，然后點(diǎn)方法 jQuery庫實(shí)現(xiàn)了對獲取方式的封裝，對方法的封裝 框架：提供代碼書寫規(guī)則，按照規(guī)則去寫代碼，框架會幫我們實(shí)現(xiàn)響應(yīng)的功能...
摘要：回調(diào)說白了，就是把函數(shù)當(dāng)參數(shù)傳給另一根函數(shù)，在另一個函數(shù)執(zhí)行時(shí)調(diào)用此函數(shù)例如，在下面這段代碼中，上面定義了兩個函數(shù)和，下面的方法請求成功執(zhí)行，失敗執(zhí)行異步異步的原理我看了網(wǎng)上的一些博客和例子，大都以定時(shí)任務(wù)為例子說明，但具體的原理我還是不太 回調(diào) 說白了，就是把函數(shù)當(dāng)參數(shù)傳給另一根函數(shù)，在另一個函數(shù)執(zhí)行時(shí)調(diào)用此函數(shù)例如，在下面這段代碼中，上面定義了兩個函數(shù)success和error，下...
摘要：回調(diào)說白了，就是把函數(shù)當(dāng)參數(shù)傳給另一根函數(shù)，在另一個函數(shù)執(zhí)行時(shí)調(diào)用此函數(shù)例如，在下面這段代碼中，上面定義了兩個函數(shù)和，下面的方法請求成功執(zhí)行，失敗執(zhí)行異步異步的原理我看了網(wǎng)上的一些博客和例子，大都以定時(shí)任務(wù)為例子說明，但具體的原理我還是不太 回調(diào) 說白了，就是把函數(shù)當(dāng)參數(shù)傳給另一根函數(shù)，在另一個函數(shù)執(zhí)行時(shí)調(diào)用此函數(shù)例如，在下面這段代碼中，上面定義了兩個函數(shù)success和error，下...
摘要：當(dāng)請求完成后注冊一個回調(diào)函數(shù)。該請求是否觸發(fā)全局處理事件如等，請求發(fā)送前的回調(diào)函數(shù)，用來修改請求發(fā)送前，此功能可用來設(shè)置自定義頭信息，在函數(shù)中返回將取消這個請求。例如，為請求指定一個回調(diào)函數(shù)名。即改變回調(diào)函數(shù)的，默認(rèn)就是傳入的整個對象。 Ajax Ajax 全稱是 asynchronous javascript and xml，并不是新的編程語言，可以說是已有技術(shù)的組合，主要用來實(shí)現(xiàn)客...
閱讀 1225·2021-09-26 09:55
閱讀 3191·2019-08-30 15:55
閱讀 965·2019-08-30 15:53
閱讀 2296·2019-08-30 13:59
閱讀 2380·2019-08-29 13:08
閱讀 1107·2019-08-29 12:19
閱讀 3302·2019-08-26 13:41
閱讀 418·2019-08-26 13:24
