Laravel AJAX表格405错误

Question

I'm receiving this error when attempting to submit via AJAX. When not using AJAX, the form submits just fine to it's specified url. I've read this error can happen because the form is trying to submit in the browser along with the AJAX request. I've tried using onsubmit="event.preventDefault()".

ROUTE:

Route::post('/post/{id}', [
    'uses' => '\App\Http\Controllers\PostController@postMessage',
    'as' => 'post.message',
    'middleware' => ['auth'],
]);

FORM:

<form id="post" role="form" action="{{ route('post.message', ['id' => $user->id]) }}" onsubmit="event.preventDefault()">
    <div class="feed-post form-group{{ $errors->has('post') ? ' has-error' : ''}}">
        <textarea class="form-control feed-post-input" rows="2" id="postbody" name="post" placeholder="What's up?"></textarea>
        <div class="btn-bar">
            <!-- <button type="button" class="btn btn-default btn-img btn-post" title="Attach an image"><span class="glyphicon glyphicon-picture"></span></button> -->
            <!-- <input type="file" id="img-upload" style="display:none"/> -->
            <button class="btn btn-default btn-post" title="Post your message"><span class="glyphicon glyphicon-ok"></span></button>
        </div>
        @if ($errors->has('post'))
            <span class="help-block">{{ $errors->first('post') }}</span>
        @endif
    </div>
    <input type="hidden" name="_token" value="{{ CSRF_token() }}">
</form>

CONTROLLER:

public function postMessage(Request $request, $id)
{

        $this->validate($request, [
            'post' => 'required|max:1000',
        ]);
  if(Request::ajax()){
         Auth::user()->posts()->create([
             'body' => $request->input('post'),
             'profile_id' => $id
         ]);
  }
}

JS:

$('#post').submit(function(){
    var body = $('#postbody').val();
    var profileId = $('#user_id').text();
    var postRoute = '/post/'+profileId;

    var dataString = "body="+body+"&profile_Id="+profileId;

    $.ajax({
        type: "POST",
        url: postRoute,
        data: dataString,
        success: function(data){
            console.log(data);
        }
    });
});

Answer 1

try this, remove

onsubmit="....." attribute from form

and update your submit method like this

$('#post').submit(function(event){
    var body = $('#postbody').val();
    var profileId = $('#user_id').text();
    var postRoute = '/post/'+profileId;

    var dataString = "body="+body+"&profile_Id="+profileId;

    $.ajax({
        type: "POST",
        url: postRoute,
        data: dataString,
        success: function(data){
            console.log(data);
        }
    });

   //this will prevent your default form submit 
   event.preventDefault();
});

I hope this will work for you