1. ホーム
  2. 質問と答え
  3. ME for a Laxvel 5.3

ME for a Laxvel 5.3

2017-02-01 3 views
3

誰かが、Laravel 5.3のajax投稿メソッドについて、完全な最低限の例を説明してください。 私はウェブにいくつかのリソースがあることを知っていますが、簡潔で簡単な最小の例がありません。ME for a Laxvel 5.3

出典

2017-02-01 jonathan.scholbach

答えて

7

私は、モデルコントロールビューのパラダイム、Laravelの基本的な理解、JavaScriptとJQueryの基本的な理解（簡単にするために使用します）について基本的な知識があると思います。

我々は編集フィールドと、あなたのルート/ web.phpにルートを追加する必要がある最初のサーバにポスト

1.ルート

ボタンを作成します。あなたは、通常のビューから知っているのと同様に、ビューのための1つのルートを作成します：あなたが作成する必要が

Route::get('ajax', function(){ return view('ajax'); });

第2の経路は、AjaxのPOSTリクエストを処理するルートです。それはポスト方法を使用していることを告知してください：

Route::post('/postajax','[email protected]');

2. AjaxControllerにおけるコントローラ機能あなたが今作成した（第2）の経路では

、コントローラ機能ポストが呼び出されます。

<?php 
namespace App\Http\Controllers; 
use Illuminate\Http\Request; 


class AjaxController extends Controller { 

    public function post(Request $request){ 
     $response = array(
      'status' => 'success', 
      'msg' => $request->message, 
    ); 
     return response()->json($response); 
    } 
}

機能は、データを受信する準備ができている：だから 

php artisan make:controller AjaxController

とアプリ/ HTTP /コントローラで

/AjaxController.php追加機能次の行を含む ポストをコントローラを作成しますHttpリクエストを介して返され、json形式のレスポンス（ステータス 'success'とリクエストから得られたメッセージからなる）を返します。

3.私たちはビューAJAXを指すルートを定義した最初のステップで表示

は、今 ajax.blade.phpビューを作成します。

<!DOCTYPE html> 
<html> 
<head> 

    <!-- load jQuery --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

    <!-- provide the csrf token --> 
    <meta name="csrf-token" content="{{ csrf_token() }}" /> 

    <script> 
     $(document).ready(function(){ 
      var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content'); 
      $(".postbutton").click(function(){ 
       $.ajax({ 
        /* the route pointing to the post function */ 
        url: '/postajax', 
        type: 'POST', 
        /* send the csrf-token and the input to the controller */ 
        data: {_token: CSRF_TOKEN, message:$(".getinfo").val()}, 
        dataType: 'JSON', 
        /* remind that 'data' is the response of the AjaxController */ 
        success: function (data) { 
         $(".writeinfo").append(data.msg); 
        } 
       }); 
      }); 
     });  
    </script> 

</head> 

<body> 
    <input class="getinfo"></input> 
    <button class="postbutton">Post via ajax!</button> 
    <div class="writeinfo"></div> 
</body> 

</html>

あなたはhttps://laravel.com/docs/5.3/csrf

出典

2017-02-01 14:14:53

+0

素晴らしい答えを読んで、このCSRFトークンとの関係何だろ場合は、すべては私のような、初めてここにあります –

関連する問題

 関連する問題