I'm trying to make a simple Ajax post using Laravel 5. I read that there is a issue with the Csrf Token matching and that i could put my uri into the VerifyCsrfToken expection to step around this. This part functions, however now I get a 422 error when i make the post.

Did I mess something up in my code? How can I get this working? Here is what I have:

HTML:

<div class = "q-form">
                    {!!Form::open(array('url' => 'questions')) !!}
                        <div class = "form-group">
                            {!! Form::hidden('user_id', $myid, ['class' => 'form-control']) !!}
                            {!!Form::label('title', 'Title:')!!}
                            {!!Form::text('title', null, ['class'=> 'form-control'])!!}

                            {!!Form::label('question', 'Question:')!!}
                            {!!Form::textarea('question', null, ['class'=> 'form-control area', 'placeholder' => 'What would you like to ask?'])!!}


                        {!!Form::submit('Ask!', ['class'=> 'btn btn-danger form-control ask'])!!}
                        </div>
                    {!! Form::close() !!}
                </div>

JS:

$('.ask').click(function(e) {

       e.preventDefault();

       var postData = $(this).serializeArray();

       var base_url = '/';
       $.ajax({
           type: "POST",
           url: base_url + "questions",
           data: postData,
           success: function (data) {
               console.log(data);
           }

       });
   });

Controller:

 public function book()
{

    if(Request::ajax()){

        return Response::json(Input::all());

    }
}

VerifyCsrfToken:

  class VerifyCsrfToken extends BaseVerifier
{

    protected $except = [
        'book/*',
        'book',
         'questions'

    ];
}

I'm trying to make a simple Ajax post using Laravel 5. I read that there is a issue with the Csrf Token matching and that i could put my uri into the VerifyCsrfToken expection to step around this. This part functions, however now I get a 422 error when i make the post.

Did I mess something up in my code? How can I get this working? Here is what I have:

HTML:

<div class = "q-form">
                    {!!Form::open(array('url' => 'questions')) !!}
                        <div class = "form-group">
                            {!! Form::hidden('user_id', $myid, ['class' => 'form-control']) !!}
                            {!!Form::label('title', 'Title:')!!}
                            {!!Form::text('title', null, ['class'=> 'form-control'])!!}

                            {!!Form::label('question', 'Question:')!!}
                            {!!Form::textarea('question', null, ['class'=> 'form-control area', 'placeholder' => 'What would you like to ask?'])!!}


                        {!!Form::submit('Ask!', ['class'=> 'btn btn-danger form-control ask'])!!}
                        </div>
                    {!! Form::close() !!}
                </div>

JS:

$('.ask').click(function(e) {

       e.preventDefault();

       var postData = $(this).serializeArray();

       var base_url = 'http://rem-edu-es.eu1.frbit.net/';
       $.ajax({
           type: "POST",
           url: base_url + "questions",
           data: postData,
           success: function (data) {
               console.log(data);
           }

       });
   });

Controller:

 public function book()
{

    if(Request::ajax()){

        return Response::json(Input::all());

    }
}

VerifyCsrfToken:

  class VerifyCsrfToken extends BaseVerifier
{

    protected $except = [
        'book/*',
        'book',
         'questions'

    ];
}

• javascript
• php
• jquery
• ajax

• What is the error the developer console shows in the network tab for the response? – JSelser Commented Sep 24, 2015 at 9:18
• I dont see an error in the network tab. just this in the console POST rem-edu-es.eu1.frbit.net/questions 422 (Unprocessable Entity) – Ricki Moore Commented Sep 24, 2015 at 9:22
• Here ill add photos of the error console. This time it did shoot an error. – Ricki Moore Commented Sep 24, 2015 at 9:24
• Great, although knowing it's a 422 isn't much help. The stack trace on the other hand is, can you get that? – JSelser Commented Sep 24, 2015 at 9:25
• sorry to be blunt but are you sure the route is pointing to the correct controller function. Seems the 422 is caused by some validation. – Mwaa Joseph Commented Sep 24, 2015 at 13:50

3 Answers 3

Error handling an object within response.

error :function( data ) {
        if( data.status === 422 ) {
            var errors = $.parseJSON(data.responseText);
            $.each(errors, function (key, value) {
                // console.log(key+ " " +value);
            $('#response').addClass("alert alert-danger");

                if($.isPlainObject(value)) {
                    $.each(value, function (key, value) {                       
                        console.log(key+ " " +value);
                    $('#response').show().append(value+"<br/>");

                    });
                }else{
                $('#response').show().append(value+"<br/>"); //this is my div with messages
                }
            });
          }

422 is a default response when validation fails. When you processing ajax response, you need to process "success" and "error". Example from my code:

$.ajax({
    url: $(this).data('url'),
    type: "post",
    dataType: "json",
    data: values,
    success: function (data) {
        $('#list').append(data.view);
    },
    error: function (data) {
        var errors = $.parseJSON(data.responseText);
        $.each(errors, function (key, value) {
            $('#' + key).parent().addClass('error');
        });
    }
});

By the way, you can pass a _token parameter with your ajax post, then you don't need to disable CSRF protection. Just add a hidden input

{!! Form::token() !!}

in your form that you send to a server via ajax.

Try adding status code in your response:

public function book()
{
    if(Request::ajax()){
        return Response::json(Input::all(), 200);
    }
}