2016-08-05 15 views
0

vue.jsのチュートリアルを探しています。ここでは、ajaxを使用してデータベースにデータを送信できます。私はいくつかの例を見つけるが、説明はない。誰かが例を書いて説明できますか?間に、私はlaravelを使用しています、私はコントローラにデータを送ることができますか?あなたはvue-resourceをインストールする必要がvue.js(ajax)を使用してデータベースにデータを送信する方法

答えて

2

を、私は、すべてのAjaxリクエスト(AjaxController.php)の検証を行うと、データベースとの対話を処理するLaravelコントローラを作成することから始め普通のもの。それは専用のコントローラーである必要はありませんが、あなたはどんなコントローラーを使用することもできます。クライアント側では、私のvueアプリやコンポーネントのメソッドを宣言します(プロジェクトに応じて、よりグローバルな方法で行うことも、一部のコンポーネント内に保持することもできます)。サーバーに送信します。ここでは、前の答えで指摘されているように、ajaxリクエスト、純粋なjavascript、jquery、またはvue-resourceを実行したいものを使用できます。私はいつもjqueryを使っています。なぜなら私は自分のプロジェクトのすべてで起こってしまっていて、シンタックスにもっと慣れていますが、それは本当にあなた次第です。

<?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> 

私は私だけでこの例をテストしませんでした。ここ

Laravelコントローラは、私はそれを行う方法ですあなたが何かエラーを見つけたら驚かないでください、しかし、私はそれが一般的なアイデアに合格したことを願っています。

乾杯

+0

ありがとう、しかし、そのデータをコントローラにルーティングする方法を説明できますか? –

+0

ルートを他のルートと同じように作成します。私が与えた例は、単にあなたのroutes.phpでこれを持つことができます: 'Route :: post( 'your-url'、[ 'as' = 'any-alias'、 'は' => AjaxController @ createUser ' ]); ' –

0

は、あなたが行う:

Laravelを使用して
this.$http.post('your/endpoint.php', {some: data}).then(response => { 
    // something to do with your response 
} 
+0

あなた/ endpoint.phpは何ですか? –

+3

あなたのエンドポイントです。 – gurghet

関連する問題