除了使用URLSearchParams處理axios發送的數據,但是兼容性不好,其他的兼容方法


 

  在使用axios這個ajax插件的時候,我們有些時候會遇到一些問題,比如:數據格式不正確

  以最簡單的例子為基礎(這里使用post方法):

  

  在上面的例子中我們直接調用axios的post方法,傳給后台的參數為json格式,這和jquery的ajax寫法相當類似!

  但是,axios發送的數據格式和jquery ajax發送的默認數據格式卻不相同,接下來讓我們來看一下不同之處:

  1.axios的數據類型

  

  2.jquery ajax的數據類型

  

  看到這里,有的小伙伴就要說了,修改下ContentType不就好了,其實不然,即時是修改了ContentType,數據依然不正確:

  --------------------->

 

  通過度娘的各種檢索,終於找到了答案: 使用URLSearchParams來處理參數,URLSearchParams的兼容性並不高,所以使用的時候還是要注意(可以考慮使用babel來轉換)

  具體的操作如下:

  ----------------->

  通過使用URLSearchParams的處理,我們就能像jquery ajax發送的數據一樣了!!!

  

使用application / x-www-form-urlencoded格式


默認情況下,axios將JavaScript對象序列化為JSON。 要以應用程序/ x-www-form-urlencoded格式發送數據,您可以使用以下選項之一。

瀏覽器

在瀏覽器中,您可以使用URLSearchParams API,如下所示:

1
2
3
4
var params = new URLSearchParams();
params.append( 'param1', 'value1');
params.append( 'param2', 'value2');
axios.post( '/foo', params);

請注意,所有瀏覽器都不支持URLSearchParams,但是有一個polyfill可用(確保polyfill全局環境)。

或者,您可以使用qs庫對數據進行編碼:

1
2
var qs = require('qs');
axios.post( '/foo', qs.stringify({ 'bar': 123 });

Node.js

在node.js中,可以使用querystring模塊,如下所示:

1
2
var querystring = require('querystring');
axios.post( 'http://something.com/', querystring.stringify({ foo: 'bar' });

你也可以使用qs庫。

Promise


axios 依賴本機要支持ES6 Promise實現。 如果您的環境不支持ES6 Promises,您可以使用polyfill。

TypeScript


axios包括TypeScript定義。

1
2
import axios from 'axios';
axios.get( '/user?ID=12345');

axios在很大程度上受到Angular提供的$http服務的啟發。 最終,axios努力提供一個在Angular外使用的獨立的$http-like服務。

 

本文章部分引用(https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams#Browser_compatibility,https://segmentfault.com/a/1190000005980048)

----------------------------------------------------------------------------------------

除了上面那些復制粘貼的,下面

重點來了,這是qs.stringify與JSON.stringify的區別

var a = {name:'hehe',age:10};
qs.stringify序列化結果如下

name=hehe&age=10

而JSON.stringify序列化結果如下:

 
"{"a":"hehe","age":10}"

  所以只要在傳遞參數時不按照json格式傳遞,反正最終都會轉化成qs.stringify轉化后的格式,所以只要傳遞時改為name=value的格式傳遞即可,php也會正常接收。

eg:

axios.post('../php/index.php','tel='+this.tel+'&pwd='+this.pwd+'&rpwd='+this.rpwd).then(function (response) {
alert(response.data);

php:

$tel1 = trim($_POST['tel']);

----------------------------------------------------------------------------------------

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM