无法使用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

回答

相关问题