无法使用vue.js和Ajax将JSON数据发布到Rest API

Question

使用ajax和vue.js，我能够从创建的api获取并显示数据。 但是，当我尝试发布到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的get请求看起来几乎完全相同，并且可以正常工作。 所以我很确定我的ajax语法是正确的

Answer 1

您应该使用vue-resource ，它专门用于VueJS。 您将不会遇到现在遇到的问题，并且该功能与jQuery的AJAX函数非常相似：

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

文档在这里。