無法使用vue.js和ajax發佈json數據來休息api

使用ajax和vue.js，我能夠從我創建的api獲取並顯示數據。但是，當我嘗試發佈到api時，遇到了問題。控制檯中沒有顯示任何內容，所以這個問題對我來說特別複雜。當我修改函數中的警報時，表單中的數據綁定似乎正在工作並傳遞到函數中。但是，沒有數據正在發送。無法使用vue.js和ajax發佈json數據來休息api

這裏是我的html：

<form> 

    <input placeholder="Enter your Name" v-model="newGuest.name"><br><br> 

    <textarea placeholder="Leave a Message" v-model="newGuest.message"></textarea><br><br> 

    <button v-on:click="addGuest">Submit</button> 

</form>

這裏是newGuest，數據的設置是綁定到表單輸入字段的JSON：

newGuest: { 
    name:'', 
    message:'' 
    }

最後，這裏是vue.js/ajax代碼發送發佈請求：

addGuest: function() { 

    var xhp = new XMLHttpRequest() 
    xhp.open('POST', apiURL) 
    xhp.setRequestHeader("Content-type", "application/json"); 
    xhp.send(this.newGuest) 

    this.newGuest.name = '' 
    this.newGuest.message = '' 

    }

我的請求使用ajax看起來幾乎完全一樣，並且這是工作。所以我很確定我的ajax語法是正確的

來源

2016-03-03 Brian Ly

嘗試字符串化的** ** newGuest對象： 'xhp.send（ JSON.stringify（this.newGuest））' –

omg非常感謝你，我試着把它串起來，但我一定是做錯了。我首先將它存儲爲一個變量，然後使用.send –

你應該使用vue-resource，它被設計成專門用於VueJS。你不會有你現在面臨的問題和功能是非常相似jQuery的AJAX功能：

this.$http({url: '/someUrl', method: 'GET'}).then(function (response) { 
     // success callback 
    }, function (response) { 
     // error callback 
    });

Docs here.

來源

2016-03-03 07:31:17 Andrius

發送該變量，我研究並決定不會因爲它會是一個額外的文件而寫入ajax相對容易。除此之外，使用vue-resource會帶來哪些好處？ –

你總是可以合併文件。我想說的好處是相當明顯的 - 簡單的語法（較小的代碼），更容易的響應/錯誤/一般回調處理。攔截器功能非常好（在任何請求之前/之後運行X）。很明顯，如果你在你的應用中只做了幾個Ajax調用，你不需要額外的重量。 – Andrius

無法使用vue.js和ajax發佈json數據來休息api

回答

相關問題