How to submit a form in laravel 5 using ajax?

Question

I have a lot of problems when I learned how to make an ajax message in laravel. I want to be able to show errors using jquery after checking, but I have no idea how to access the object sent to my controller; so I don’t even know what to “return” to the controller. Can someone let me through this?

This is part of my view.

<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 file:

 $(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'); } } 

Request for form:

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

Without looking at any of your code, I can tell you about my way of accomplishing this task. There may be other ways, but this is usually the one I’ve approached since I started using Laravel.

I want to be able to show errors using jquery after checking, but I have no idea how to access the object sent to my controller; therefore, I don’t even know what to "return" to the controller.

Let's start by breaking down 3 simple questions.

1. How to access the object sent to the controller?

Ok, in your AJAX you can send a GET or POST request. The convention says that you should use POST to update the model and GET to retrieve from the model. If you use REST, then you have other ways to use (PUT, PATCH, DELETE, etc.). You can learn more about it yourself, but for the sake of this answer, I will keep things simple with GET and POST.

In your example, you are using POST, so release this. You have already called the jQuery serialize method, so that's all you need to do. In your Laravel controller, just take the Request $request argument for the method, and the Laravel $request->input() method will give you an array of keys / values ​​of all parameters sent in the request. Then you can process them accordingly.

2. What should I return to the controller?

Usually you return JSON data for an AJAX request. It's easy to parse, and JavaScript and JQuery have good JSON parsing objects for you.

In your Laravel controller, you can add the following line at the end of your method to return JSON:

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

In this example, $data is an array containing the JSON you want to return. In PHP, we can represent a JSON string as an array of key / value pairs, for example:

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

Typically, if it was a plain old PHP script, we would need to call PHP json_encode , but Laravel handles this for us, so all we need to do is pass an array. For debugging purposes, you can use the JSON_PRETTY_PRINT constant, which will display JSON on the screen if you access the URL directly:

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

3. How to access the object sent from my controller?

So, now that your answer is a simple JSON string, you can use any of the built-in JavaScript methods to parse JSON. I usually use JSON.parse(json) , where json is your JSON string returned by the controller. See here for more details.

4. So, how do I get this data?

Well, it looks like you probably already figured it out, but just to make sure I clarify. You need to register a route to your controller. Then you can simply call this URI with a JQuery AJAX object, and then the data variable you entered will be what was returned from the controller, in this case the JSON string.