vue中如何發(fā)送ajax請(qǐng)求

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)vue中如何發(fā)送ajax請(qǐng)求，文章內(nèi)容豐富且以專(zhuān)業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)建站專(zhuān)注于企業(yè)營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、網(wǎng)站重做改版、永勝網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5頁(yè)面制作、商城開(kāi)發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性?xún)r(jià)比高，為永勝等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

首頁(yè)安裝并引入axios

1、npm install axios -S #直接下載axios組件，下載完畢后axios.js就存放在node_modules\axios\dist中

2、網(wǎng)上直接下載axios.min.js文件

3、通過(guò)script src的方式進(jìn)行文件的引入

axios基本使用方法

發(fā)送get請(qǐng)求

1、基本使用格式

格式1：axios([options]) #這種格式直接將所有數(shù)據(jù)寫(xiě)在options里，options其實(shí)是個(gè)字典

格式2：axios.get(url[,options]);

2、傳參方式：

通過(guò)url傳參

通過(guò)params選項(xiàng)傳參

下面我們來(lái)看一個(gè)vue發(fā)送ajax get請(qǐng)求實(shí)例代碼




  
  發(fā)送AJAX請(qǐng)求
  
  
  


  
    發(fā)送AJAX請(qǐng)求

    GET方式發(fā)送AJAX請(qǐng)求

發(fā)送post請(qǐng)求（push,delete的非get方式的請(qǐng)求都一樣）

1、基本使用格式

格式：axios.post(url,data,[options]);

2、傳參方式

1、自己拼接為鍵值對(duì)

2、使用transformRequest，在請(qǐng)求發(fā)送前將請(qǐng)求數(shù)據(jù)進(jìn)行轉(zhuǎn)換

3、如果使用模塊化開(kāi)發(fā)，可以使用qs模塊進(jìn)行轉(zhuǎn)換

4、注釋?zhuān)篴xios默認(rèn)發(fā)送post數(shù)據(jù)時(shí)，數(shù)據(jù)格式是Request Payload，并非我們常用的Form Data格式，所以參數(shù)必須要以鍵值對(duì)形式傳遞，不能以json形式傳參

下面看是一個(gè)vue發(fā)送ajax post請(qǐng)求實(shí)例代碼




  
  發(fā)送AJAX請(qǐng)求
  
  
  


  
    發(fā)送AJAX請(qǐng)求

    GET方式發(fā)送AJAX請(qǐng)求

上面我們所介紹的vue發(fā)送ajax請(qǐng)求都是在同一域名下進(jìn)行的也就是同域或者說(shuō)是同源

那么vue如何發(fā)送跨域的ajax請(qǐng)求呢？

vue發(fā)送跨域ajax請(qǐng)求

1、須知：axios本身并不支持發(fā)送跨域的請(qǐng)求，沒(méi)有提供相應(yīng)的API，作者也暫沒(méi)計(jì)劃在axios添加支持發(fā)送跨域請(qǐng)求，所以只能使用第三方庫(kù)

2、使用vue-resource發(fā)送跨域請(qǐng)求

3、安裝vue-resource并引入

npm info vue-resource #查看vue-resource 版本信息

cnpm install vue-resource -S #等同于cnpm install vue-resource -save

4、基本使用方法（使用this.$http發(fā)送請(qǐng)求）

this.$http.get(url, [options])

this.$http.head(url, [options])

this.$http.delete(url, [options])

this.$http.jsonp(url, [options])

this.$http.post(url, [body], [options])

this.$http.put(url, [body], [options])

this.$http.patch(url, [body], [options])

下面再來(lái)看兩個(gè)實(shí)例

向360搜索發(fā)送數(shù)據(jù)




  
  
  
  發(fā)送AJAX請(qǐng)求
  
  
  




  {{name}}

  sendJSONP

Vue作為一個(gè)沒(méi)有入侵性的框架并不限制你使用ajax框架

上述就是小編為大家分享的vue中如何發(fā)送ajax請(qǐng)求了，如果剛好有類(lèi)似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

vue中如何發(fā)送ajax請(qǐng)求

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管