ajaxを使用してlaravel 5にフォームを投稿するにはどうすればよいですか？

Question

私はlaravelでajax投稿をする方法を学ぶのに苦労しています。検証後にjqueryを使用してエラーを表示できるようにしたいのですが、コントローラに送信されたオブジェクトにアクセスする方法がわかりません。だから私はコントローラーで何を '返す'か分からない。誰かが私をこの間に歩いてもらえますか？

これが私の見解

<meta name="_token" content="{{ csrf_token() }}" />    
<div class='row'> 
     {!! Form::open(['url'=>'register','id'=>'sign-up','class'=>'col-md-6 col-md-push-4 form-horizontal'])!!} 

      <div class='form-group'> 
       {!! Form::label('first_name', 'First Name:',['class'=>'col-xs-12 col-md-3']) !!} 
       <div class= 'col-xs-12 col-md-6'> 
        {!! Form::text('first_name', null, ['class' => 'form-control'])!!} 
       </div> 
      </div> 
      <div class='form-group'> 
       {!! Form::label('last_name', 'Last Name:',['class'=>'col-xs-12 col-md-3']) !!} 
       <div class= 'col-xs-12 col-md-6'> 
        {!! Form::text('last_name', null, ['class' => 'form-control'])!!} 
       </div> 
      </div> 
      <div class='form-group'> 
       {!! Form::label('email', 'Email Address:',['class'=>'col-xs-12 col-md-3']) !!} 
       <div class= 'col-xs-12 col-md-6 '> 
        {!! Form::text('email', null, ['class' => 'form-control'])!!} 
    <div class='form-group'> 
      {!! Form::label('password', 'Password:',['class'=>'col-xs-12 col-md-3']) !!} 
       <div class= 'col-xs-12 col-md-6'> 
        {!! Form::password('password', null, ['class' => 'form-control'])!!} 
       </div> 
      </div> 

        <div class='form-group'> 
      {!! Form::label('password_confirmation', 'Confirm Password:',['class'=>'col-xs-12 col-md-3']) !!} 
       <div class= 'col-xs-12 col-md-6'> 
        {!! Form::password('password_confirmation', null, ['class' => 'form-control'])!!} 
       </div> 
      </div> 
        </div> <div class='btn btn-small'> 
       {!! Form::submit('Join Us!',['class'=>'btn btn-success btn-sm form-control'])!!} 
      </div> 

     {!! Form::close() !!} 
     </div> 

.jsファイルの一部です：

$(function(){ 

$('#sign-up').on('submit',function(e){ 
    $.ajaxSetup({ 
     header:$('meta[name="_token"]').attr('content') 
    }) 
    e.preventDefault(e); 

     $.ajax({ 

     type:"POST", 
     url:'/register', 
     data:$(this).serialize(), 
     dataType: 'json', 
     success: function(data){ 
      console.log(data); 
     }, 
     error: function(data){ 

     } 
    }) 
    }); 
}); 

コントローラ：

<?php 

namespace App\Http\Controllers; 

use App\Http\Requests\CreateRegisterRequest; 
use App\Http\Controllers\Controller; 
use App\User; 
use Illuminate\HttpResponse; 
use Input; 
class UserController extends Controller 
{ 

    public function create(CreateRegisterRequest $request) 
    { 

    } 

    public function show() 
    { 
     return view('user.profile'); 
    } 

} 

フォーム要求：

<?php 

namespace App\Http\Requests; 

use App\Http\Requests\Request; 

class CreateRegisterRequest extends Request 
{ 
    public function authorize() 
    { 
     return true; 
    } 
public function rules() 
    { 
     return [ 
      'first_name' =>'required', 
      'last_name'=>'required', 
      'url'=>'url', 
      'description', 
      'email'=>'unique:users,email|email', 
      'password'=>'min:6|confirmed', 
      'password_confirmation'=>'min:6' 


     ]; 
    } 
} 

Answer 1

あなたのコードを一切見ずに、この作業を実行する方法を教えてください。他の方法もあるかもしれませんが、これはLaravelを使い始めて以来、一般的にどのようにアプローチしていますか？

私が検証した後、jqueryのを使用してエラーを表示することができるようにしたいが、私は私のコントローラに送信されたオブジェクトにアクセスする方法は考えています。だから私はコントローラーで何を '返す'か分からない。

3つの単純な質問にこれを分解することから始めるのをしてみましょう。

1. 〜コントローラに送信されたオブジェクトにアクセスするにはどうすればよいですか？

あなたのAJAXでは、GETリクエストまたはPOSTリクエストを送信することができます。規約では、モデルを更新するためにPOSTを使用し、モデルから取得するためにGETを使用する必要があります。 RESTを使用している場合は、（PUT、PATCH、DELETEなど）を使用する他の方法があります。これらについては、あなた自身でもっと学ぶことができますが、この回答のために私は物事をGETとPOSTだけで簡単に保ちます。

あなたの例ではPOSTを使用していますので、その点をお試しください。すでにJQuery serializeメソッドが呼び出されているので、これだけです。 Laravelコントローラでは、メソッドの引数をRequest $requestとし、Laravelメソッド$request->input()は、リクエストで送信されたすべてのパラメータのキー/値の配列を返します。それに応じてそれらを処理することができます。

2.コントローラで何を返す必要がありますか？

通常、AJAXリクエストのJSONデータを返します。解析するのは簡単で、JavaScriptとJQueryの両方にJSONを解析するための素晴らしいオブジェクトがあります。あなたLaravelコントローラで

、あなたはいくつかのJSONを返すために、あなたのメソッドの最後に次の行を追加することができます

return response()->json($data); 

この例では、$dataはあなたが戻りたいJSONを含む配列です。PHPでは、私たちはそうのように、キー/値ペアの配列としてJSON文字列を表すことができます。これは、昔ながらのPHPスクリプトであれば

$data = [ 
    'success': true, 
    'message': 'Your AJAX processed correctly' 
]; 

一般的に、我々はPHPのjson_encode関数を呼び出す必要があります、 Laravelがこれを処理するので、配列を渡すだけです。私はからを送られたオブジェクトにアクセスするにはどうすればよい

return response()->json($data, 200, [], JSON_PRETTY_PRINT); 

3：デバッグのために、あなたはJSONがうまく画面上で、あなたが直接URLにアクセスした場合にその意志を出力、JSON_PRETTY_PRINT定数を利用したいこと私のコントローラー？

あなたの応答が単純なJSON文字列になったので、JSONの解析に組み込みのJavaScriptメソッドを使用できます。私は通常JSON.parse(json)を使用します。ここでjsonはコントローラーから返されたJSON文字列です。詳細は、hereを参照してください。

4.このデータはどのように入手できますか？

あなたはおそらくすでにこれを理解しているようですが、私が明確にすることを確実にしているようです。あなたのコントローラへのルートを登録する必要があります。次に、JQuery AJAXオブジェクトを使用してそのURIを呼び出すだけで、注入された変数dataはコントローラから返されたもの（この場合はJSON文字列）になります。