Wie JQuery AJAX Funktion vue.js

Question

Ich habe folgende AJAX Funktion geschrieben in jQuery (nur machen AJAX-Aufruf zu bekommen Ergebnis für div A und div B - das Beispiel vereinfacht) konvertieren

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> 

ich verstehe, wie die HTML-tem machen Platte für vue.js und wie man JavaScript-Variablen setzt, aber wie stelle ich AJAX-Anfrage für vue.js?

Vielen Dank.

Answer 1

Der vorgeschlagene Weg ist die Verwendung der Axios-Bibliothek.

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

Wo die Vue-Instanz

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 
     }) 
    } 
    } 
}) 

Answer 2

Nun, zunächst vorneweg, haben Sie von DOM-Targeting mit jQuery.In VueJS loszuwerden, gibt es keine direkte DOM-Manipulation. Als nächstes müssen Sie aufhören zu denken jQuery Weg - Vue und jQuery sind 2 völlig unterschiedliche Dinge, die unterschiedliche Design-Muster haben.

Über Ihr Problem:

Zuerst müssen Sie Ereignis-Listener auf DOM-Element

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

dann in Ihre Vue Instanz anhängen, die Sie wollen, dass die Methode definieren, aber bevor Sie es machen, stellen Sie sicher, Sie haben jQuery

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

Aber am Ende installiert ist, werde ich nicht Sie jQuery verwenden hier vorschlagen - es viel besser libs wie Vue Ressourcen- und Axios sind.