對比jQuery與vue+axios，兩者發送ajax請求的方法和不同

axios和jQuery的ajax本質上都是對原生XHR的封裝，不過axios符合最新的ES規範。因此，在用vue編寫js時，使用axios而不是jQuery的ajax應該是更好的方案。

axios和jQuery的ajax用法大多相同，不過還是有少數地方不一樣，我們來對比一下。由於axios經常與vue結合，這裏筆者採用vue+axios實現axios版ajax。

---

post請求

準備控制器

首先實現一個後臺控制器，筆者此處採用spring boot，可以看到，這個控制器需要一個請求參數id，然後會返回一個包含id和msg信息的json：

package com.koorye.hellokotlin.controller;

import com.alibaba.fastjson.JSON;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.HashMap;
import java.util.Map;

@Controller
public class MsgControllerJava {
  @ResponseBody
  @RequestMapping("/msg")
  public Object getMsg(int id) {
    Map<String, Object> map = new HashMap<>();
    map.put("id", id);
    map.put("msg", "A message from Controller.");
    return JSON.toJSON(map);
  }
}

準備html

我們來準備兩個按鈕：

• jQuery給按鈕提供click事件需要用選擇器，因此這裏提供一個id
• vue+axios只需要使用v-on:click或者簡寫@click就可以指定事件

  <button class="btn btn-primary" @click="getMsg">Vue + Axios</button>
  <button id="ajaxBtn" class="btn btn-secondary">Vue + JQuery</button>

實現ajax請求

請關注以下不同：

• 發送參數的方式
• 接收參數的方式

vue+axios版ajax

此處需要引入Qs來轉換數據類型：

new Vue({
  el: '#app',
  methods: {
    getMsg() {
      axios({
        method: 'post',
        url: '/msg',
        data: Qs.stringify{
          id: 111
        },
        responseType: 'json',
      }
      .then(function (resp) {
        alert(resp.data.id + ", " + resp.data.msg);
      })
      .catch(function (error) {
        alert(error);
      })
    }  
  }
});

jQuery版ajax

$(function () {
  $('#ajaxBtn').click(function () {
    $.ajax({
      method: 'post',
      url: '/msg',
      data: {
        'id': 222
      },
      dataType: 'json'
    })
    .done(function (resp) {
      alert(resp.id + ", " + resp.msg);
    })
    .fail(function (error) {
      alert(error);
    })
  })
})

發送參數的不同

傳統的jquery把請求數據封裝在data中，data是json的形式，需要用引號表示成員名；

而axios+qs的形式不需要使用引號，再通過Qs.stringify()把數據轉換成json。

我們來看一下axios不使用Qs.stringify()會發生什麼：

報了500錯誤？再來看一下發送的參數：

Request Payload？那麼正常的參數是什麼呢，下面是jQuery發送的參數：

可以看到，正常發送的參數應該是Form Data，這樣後臺才能接收到一個json；如果是Request Payload，後臺還需要額外的解析才能得到其中的json。

所以，jQuery可以直接在data中編寫json來發送post請求；而axios需要把編寫的內容通過Qs轉換成json字符串才能發送post請求。

接收參數的不同

觀察上面的腳本我們發現，jQuery可以直接通過resp.id、resp.msg得到json中的數據，axios的數據卻存在resp.data中。

我們來試一下把得到的json轉換成字符串，使用JSON.stringify(resp)轉換再用alert(JSON.stringify(resp))輸出：

jQuery的ajax返回的json：

axios返回的json:

可以看到jQuery返回的json中只有數據；axios卻返回了各種信息，如狀態碼、時間、url、請求方法等，其數據存在data成員中，這就是我們獲取數據方法不同的原因。

---

get請求

既然請求方法只需要指定method，那麼，如果我們直接把兩個腳本中的method改成get，能否正常使用呢？

jQuery正常運行：

axios報500狀態碼錯誤：

檢查請求頭，我們發現axios沒有傳入任何信息，甚至在去掉Qs.stringify和給id加上引號之後還是一樣：

這說明axios不能通過data給get請求提供參數。

get和post的差別

事實上，get請求通過在url後直接跟上參數來發送請求，例如localhost:8080/login/?username=koorye&password=123，就是給後臺發送了username爲koorye，password爲123的參數。

而post則是使用request body傳遞參數，參數不存入url中，而是以額外的鍵值對的方式傳遞。

jQuery與axios的data在發送get請求時的不同

觀察一下上文中jQuery和axios發送get請求時的url：

jQuery會根據請求類型自動判斷把data放到url中還是request body中，此處jQuery發送的get請求的url就帶上了參數：

而axios就不行，axios的data只用於給request body提供參數，而不能在url中附加參數：

axios的get請求方式

axios發送get請求時不能使用data，而要使用axios提供的一種新的類型params，params其中的參數會被直接加到url後，我們來試一下：

new Vue({
  el: '#app',
  methods: {
    getMsg() {
      axios({
        method: 'get',
        url: '/msg',
        params: {
          'id': 111
        },
        responseType: 'json',
      })
      .then(function (resp) {
        alert(resp.data.id + ", " + resp.data.msg);
      })
      .catch(function (error) {
        alert(error);
      })
    }
  }
});

成功發送請求並接收數據：

請求頭的url中成功附上參數：

---

總結

到這裏，我們已經成功使用jQuery和axios的ajax各自完成了get和post請求的參數發送和結果獲取，我們來總結一下不同之處：

關於發送請求:

• jQuery無論是get還是post，都使用data發送數據，jQuery會自動判斷請求類型並匹配
• axios在get請求時使用params；在post請求時使用data，並且要注意把發送的data通過Qs.stringify()轉換成json

關於接收數據:

• jQuery接收的數據直接以json的形式存在返回的response中
• axios接收一個json形式的response，返回的數據存在response的data參數中