如何將JQuery AJAX函數轉換為vue.js

Question

我有以下用jQuery編寫的AJAX函數（只需進行AJAX調用即可獲取div A和​​div B的結果-該示例已簡化）

JavaScript的

$(document).ready(function(){
    $( "#c" ).on( "click", function() {
        jQuery.ajax({
            type: "POST",
            url: "post.php",
            data: "",
            dataType:"JSON",
            success: function(data){
                if (data.status == 1){
                    $("#a").html(data.a);
                    $("#b").html(data.b);
                }
            }
        })
    })
})

HTML

<div id="a"></div>
<div id="b"></div>
<button id="c">Start</button>

我了解如何為vue.js制作HTML模板以及如何設置JavaScript變量，但是我如何為vue.js設置AJAX請求？

謝謝。

Answer 1

首先，您必須使用jQuery擺脫DOM定位。在VueJS中，沒有直接的DOM操作。 接下來，您必須停止思考jQuery方式-Vue和jQuery是2個完全不同的事物，它們具有不同的設計模式。

關於您的問題：

首先，您必須在DOM元素上附加事件偵聽器

<button id="c" @click="ajaxMethod">Start</div>

然后要在您的Vue實例中定義該方法，但是在創建該方法之前，請確保已安裝jQuery

new Vue({
  el: '#app',
  data: {
   msg: 'hi';
  },
  methods: {
   ajaxMethod() {
    jQuery.ajax({
      // bla bla bla...
    })
   }
  }
})

但是最后，我不建議您在這里使用jQuery-還有更好的庫，例如Vue Resource和Axios。

Answer 2

建議的方法是使用axios庫。

<div id="app">  
  <div>{{a}}</div>
  <div>{{b}}</div>
  <button @click="retrieveData">Start</button>
</div>

Vue實例在哪里

import axios from 'axios'
new Vue({
  el: '#app',
  data: {
    a: '',
    b: ''
  },
  methods: {
    retrieveData() {
      axios.post('post.php', {}, )
       .then(resp => {
         this.a = resp.data.a
         this.b = resp.data.b
       })
    }
  }
})