I'm getting a MethodNotAllowedHttpException in RouteCollection.php when trying to submit a form using jQuery and ajax

问题

As mentioned in the subject I'm getting a MethodNotAllowedHttpException in RouteCollection.php when trying to submit a form using jQuery and ajax

I've tried the following in my routes.php file

Route::post('/send/', 'CommsController@send');

and

Route::patch('/send/', 'CommsController@send');

Controller

use App\Http\Controllers\Controller;

class CommsController extends Controller
{
    protected function send(Request $request);
    {
        return response($request);
    }
}

jQuery ajax

if ( isValid ) {
    $( ".validation-summary" ).html( "Sending message..." );

    var data = "";

    data = "message_type=contact"
        + "&first_name=" + first_name.val()
        + "&last_name=" + last_name.val()
        + "&email=" + email.val()
        + "&message=" + message.val()

    $.ajax({
        type: "post",
        url: "send",
        data: data,
        error: function( response ) {
            $( ".validation-summary" ).removeClass( "success" );
            $( ".validation-summary" ).addClass( "validation-summary error" );
            $( ".validation-summary" ).html( "Error" );
        },
        success: function() {
            $( ".validation-summary" ).html( "Message sent." );
        }               
    });
    return false;
} else {
    return false;
}

Thanks.

回答1:

In Laravel 5.2, you need to set the route in web middleware and I presume that you have already placed the post route inside the middleware:

Route::group(['middleware' => ['web']], function() {

    Route::post('/send', 'YourController@methodName');

});

If I were at your place, I would have done something else though similar to what your code is doing.

jQuery

(function() {
    // replace $('.btnSubmit') with whatever you want
    $('.btnSubmit').click(function(e) {
        var form       = $('#yourFormId'),
            postAction = form.attr('action'),
            postData   = form.serialize();

        $.ajax({
            type: 'POST',
            url: postAction,
            data: postData,
            success: function(res) {
                console.log(res);
            },
            error: function(res) {
                console.log('Error:' + res);
            }
        });

        return false;
    });
})();

What I did:

Placed the action parameter directly in the form, instead of defining it in jQuery AJAX
Serialize the input values of the form and posted the same
Used Self Invoking Anonymous Function

Just a side note:

You are repeating $('.validation-summary') for 5 times. This means that you are violating the Principles of DRY which is not recommended. Solution for this:

var valSum = $('.validation-summary');

And then in you can use it n number of times in that piece of code.

Hope this helps you out. Happy Coding. Cheers.

回答2:

Try 'POST' instead of 'post' in your routes.php and your ajax call. Had same problem with that, and this fix it for me. Hope it helps.

回答3:

As per your last comment about the csrf_token the best solution (IMO) is:

Add the following line to inside <head></head>:

<meta id="csrf_token" name="csrf_token" content="{{ csrf_token() }}">

and then add the following js:

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
    }
});

This will mean that the csrf is always included in your ajax calls automatically.

Alternatively, you can just get the value for _token and include it in your data variable like so:

data = "message_type=contact"
    + "&first_name=" + first_name.val()
    + "&last_name=" + last_name.val()
    + "&email=" + email.val()
    + "&message=" + message.val()
    + "&_token=" + $("input[name=_token]").val();

Hope this helps!

回答4:

UPDATED: my routes.php file

Route::post('/send', 'CommsController@send');

Controller

public function send(Request $request)
{
    // return view('contact.contact');
    return view('contact.contact')->with('data', json_encode($request));
}

app/Http/Middleware/VerifyCsrfToken.php // This addition to the VerifyCsrfToken.php might not be necessary, not too sure though

protected function tokensMatch($request) {
    // If request is an ajax request, then check to see if token matches token provider in
    // the header. This way, we can use CSRF protection in ajax requests also.
    $token = $request->ajax() ? $request->header('X-CSRF-Token') : $request->input('_token');

    return $request->session()->token() == $token;
}

jQuery ajax

<head>
    <meta id="csrf_token" name="csrf_token" content="{{ csrf_token() }}">
</head>

$( document ).ready(function() {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    ....

    $.ajax({
        type: "POST",
        url: postAction,
        data: JSON.stringify(postData),
        dataType: 'json',
        encode: true
    }).done(function(response) {
        // log data to the console so we can see
        console.log(response); 

        // here we will handle errors and validation messages
        if ( ! response.success ) {
            valSum.removeClass( "success" );
            valSum.addClass( "validation-summary error" );
            valSum.html( response.errors );
        } else {
            // $( ".validation-summary" ).html( "Message sent." );
            valSum.html( response.message );
        }
    })
    .fail(function(response) {
        valSum.removeClass( "success" );
        valSum.addClass( "validation-summary error" );
        valSum.html( "Server Error: " + response.statusText + " processing your request, please contact Dorothea or report a bug." );
    });

Network error been returned in my browser

500 (Internal Server Error)

php_error.log file entry

local.ERROR: Illuminate\Session\TokenMismatchException in C:\cx\laravel\dorothea\vendor\laravel\framework\src\Illuminate\Foundation\Http\Middleware\VerifyCsrfToken.php:67

回答5:

Hi @user3514160 I just wanted to let you know that I solved my problem by changing the post method to get methods. Not too sure why get is working but post isn't but for now at least the issue has been resolved.

If anyone can shed some light as to why this would be the case that would be great.

来源：https://stackoverflow.com/questions/34783685/im-getting-a-methodnotallowedhttpexception-in-routecollection-php-when-trying-t

标签

jquery

ajax

laravel-5.2