web-dev-qa-db-ja.com

POST 5.3のajax Laravelの最小動作例

誰かがLaravel 5.3のajax投稿メソッドを完全な最小限の例で説明してもらえますか？ウェブにはいくつかのリソースがあることは知っていますが、簡潔で簡単な最小限の例を見逃しています。

ajaxlaravelpost
23
jonathan.scholbach

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

編集フィールドとサーバーに投稿するボタンを作成します。 （これはLaravel 5.0から5.6までのすべてのバージョンで機能します）

1.ルート

最初に、ルートをroutes/web.phpに追加する必要があります。通常のビューからわかるように、ビューのルートを1つ作成します。

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

作成する必要がある2番目のルートは、ajaxポストリクエストを処理するルートです。 postメソッドを使用していることに注意してください。

Route::post('/postajax','AjaxController@post');

2.コントローラー機能

今作成した（2番目の）ルートでは、AjaxControllerのController関数postが呼び出されます。コントローラーを作成する

php artisan make:controller AjaxController

app/Http/Controllers/AjaxController.phpに、次の行を含む関数postを追加します。

<?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); 
   }
}

この関数は、Httpリクエストを介してデータを受信する準備ができており、json形式のレスポンス（ステータス「成功」とリクエストから取得したメッセージで構成されます）を返します。

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>

このcsrf-tokenの問題について疑問がある場合は、 https://laravel.com/docs/5.3/csrf を読んでください。

62
jonathan.scholbach