如何使用vue.js发送数据到数据库(ajax)
我正在寻找vue.js的教程,我可以在哪里使用ajax将数据发送到数据库。我找到几个例子,但没有解释。有人可以写一个例子并解释它吗?之间,我使用laravel,我可以发送数据到控制器吗?如何使用vue.js发送数据到数据库(ajax)
使用Laravel,我开始通过创建一个Laravel控制器将处理所有的Ajax请求(AjaxController.php)做验证,并与数据库交互,正常的东西。它不一定是专用的控制器,你可以使用任何控制器,我只是这样做,以保持组织给我。在客户端,我在我的vue应用程序或组件中声明了一个方法(取决于项目,它可以更有意义地以更全局的方式进行,或者将其保留在某个组件中),我将这些数据传递给我发送到服务器。在那里,你可以使用任何你想要做的Ajax请求,纯JavaScript,jquery甚至vue-resource,如前面的答案中指出的那样。我通常使用jquery,因为我碰巧拥有所有的项目,而且我对语法更熟悉,但这真的取决于你。下面是我如何做到这一点,
Laravel控制器:
<?php
namespace App\Http\Controllers;
class AjaxController extends Controller
{
public function createUser()
{
$data = request('data');
$user = User::create($data);
return 'ok';
}
}
Vue的应用:
var app = new Vue({
el: '#app',
data: {
name: '',
age: '',
country: ''
},
methods: {
sendViaAjax: function(){
var data = {
'_token': yourCrsfToken,
'name': this.name,
'age': this.age,
'country': this.country
};
$.ajax({
url: '/your-url',
method: 'POST',
data: data,
success: function(){
console.log('We did succeed!');
},
error: function(){
console.log('We did not succeed!');
}
});
}
}
});
和HTML:
<div id='app'>
<label for="user-name">Name</label>
<input type="text" id="user-name" v-model="name" value="@{{ name }}">
<label for="user-age">Age</label>
<input type="text" id="user-age" v-model="age" value="@{{ age }}">
<label for="user-country">Country</label>
<input type="text" id="user-country" v-model="country" value="@{{ country }}">
</div>
我没有测试这个例子,我只是写了它,所以如果你发现任何错误,不要感到惊讶,但我希望它能通过一般的想法。
干杯
您必须安装vue-resource
那么你做的事:
this.$http.post('your/endpoint.php', {some: data}).then(response => {
// something to do with your response
}
什么是你的/ endpoint.php? –
这是你的终点。 – gurghet
谢谢你,但你能解释一下如何将这些数据传送给控制器吗? –
您可以在laravel中创建类似其他任何路线的路线。我给你的例子可以简单地在你的routes.php中使用: 'Route :: post('your-url',[ 'as'=>'any-alias', 'uses'=>' AjaxController @ createUser' ]);'' –