Laravel Ajax 请求使用 post 方法抛出 MethodNotAllowedException

Question

我是 Laravel 的新手，我正在尝试通过 Laravel 中的 Ajax 提交发布数据，但它会抛出

MethodNotAllowedException 但是当我通过 post 提交表单时，它确实可以工作，但尽管我使用了 Ajax，但会刷新页面。

我的代码如下：

我的 JavaScript Ajax 代码：

function collect(){
    
    $.ajaxSetup({
        headers:{
            'X-CSRF-TOKEN': $("input#token").val()
        }
    });




    const   user = [{"fname": $("input#fname").val(), _token: $("input#token").val(), _method:"POST", "lname": $("input#lname").val(),
                "email": $("input#email").val(), "pass": $("input#pass").val(),
                "confirm-pass": $("input#confirm-pass").val() 
     }];

     var form = $('form#add-user-form');

     var send_button = $('button#send').text();
     $.ajax({
        url: '/users/store',
        method: 'post',
        data: user,
        processData: false,
        dataType: 'json',
        contentType: false,
        beforeSend:function(){
                $(form).find('span.error-text').text('');
                
        },
        success:function(data){
            alert('data sent');
            
            if (data.code == 0 || data.status == 400 ){
                $.each (data.error, function(prefix, value){
                    alert(prefix + '   ' + value[0]);
                    $(form).find('span.'+prefix+'_error').text(value[0]);
                });
            }else {
                
                $(form)[0].reset();
                alert(data.msg)
            }
            

        }

     });

    

   }  

--- 控制器代码------------------------

$validator = \Validator::make($request -> all(), ['fname' => 'required|min:5|max:25', 
                        'lname' => 'required|min:5|max:25',
                        'email' => 'required|email|unique:users', 
                        'pass' => 'required|min:8|max:20|', 
                        'confirm-pass' => 'required|min:8|max:20'
                        ]);

    if (!$validator -> passes() ){
        return response()->json(['code'=> 0, 'error'=> $validator->errors()->toArray()]);
    }else {
            $user = new users();
            $user -> name = $request -> fname ;
            $user -> email = $request -> email ;
            $user -> password = $request -> pass;
            $query = $user -> save();
            if ( !$query ){
                return response() -> json(['code'=> 0, 'msg' => 'something went wrong']);
            }else {
                return response() -> json(['code' => 1, 'msg' => 'users has been successfully 
                 added']);
        

--------------- HTML代码其中------------

<div id="registeration-form">

    <div id="form-holder container">

        <form action="{{ route('users.store') }}" method="post" class="registration needs-` 
        validation" id="add-user-form">
                     
                    <input type="text" class="form-control" id="fname"  name="fname" placeholder=" 
                    First Name" required> </input>
                    <span class="text-danger error-text fname_error"></span>
                    <input type="text" id="lname" class="form-control" name="lname" placeholder=" 
                     Last Name " required> </input>
                    <span class="text-danger error-text lname_error"></span>
                    <input type="text" class="form-control" id="email" name="email" 
                     placeholder="Your Email " required> </input> 
                    <span class="text-danger error-text email_error"></span>
                    <input type="password" class="form-control" id="pass" name="pass" 
                     placeholder="Password " required> </input>
                    <span id="text-danger error-text pass-span pass_error"> </span>
                    <input type="password" class="form-control" id="confirm-pass" name="confirm- 
                     pass" placeholder="Confirm Password " required> </input>
                    <span id="text-danger error-text con-pass confirm-pass_error"> </span>
                    <input type="hidden" id="token" name="_token" value="{{ csrf_token() }}" />
                    <button type="button" class="btn btn-outline-primary" id="send" 
                    onClick="collect();">Create Account </input>

           </form>
        
      </div>

  </div>

---

我的路线 web.php 文件

Route::post('/store', 'usersController@store');
Route::post('store',[usersController::class, 'store'])->name('users.store');

---

我想要的是 Ajax 应该在没有页面刷新的情况下工作并且

     > it does through MethodNotAllowedException  Line 251

Answer 1

感谢大家在此问题上的合作，我已通过以下更改解决了此问题。

1. 我在 route/api.php 中添加了一个路由

   Route::post('store', [usersController::class,'store']);

---

1. 我已将我的 Ajax 发送网址更改如下。

   url: $('form#add-user-form').attr('action'),

这对我解决问题很有帮助。

@steven7mwesigwa 谢谢你的回答，真的很有帮助。

Answer 2

您必须为 ajax 请求提供路由到route/api.php

Answer 3

使用它而不是您当前的 ajax 配置：

    url: '{{route('users.store')}}',
    type: 'post',
    data: user,
    processData: false,
    dataType: 'json',
    contentType: false,

首先，最好使用刀片路由而不是编写 url，其次，当您尝试在 ajax 中使用 POST 方法时，它是“类型”而不是“方法”

Answer 4

下面的路线不存在。

$.ajax({
    // ...
    url: '/users/store',
    // ...
});

改用这个： 请注意，您不必手动构建数据。

$.ajax({
    // ...
    type: form.attr("method"),
    url : form.attr("action"),
    data: form.serializeArray(),
    // ...
});

注意事项：

1. 请注意，这 2 条路线相同：

Route::post('/store', 'usersController@store');
Route::post('store',[usersController::class, 'store'])->name('users.store');

您可能想要删除其中一个。如果您使用的是 Laravel 8 及更高版本，则最好使用第二种格式。

1. 虽然没有必要，但您可能还希望在表单中包含下面的 HTML 标记。使用_method 字段发送的值将用作 HTTP 请求方法。

<input type="hidden" name="_method" value="POST">

1. 我认为您的提交按钮上的 HTML 标记不匹配。

<button type="button" class="btn btn-outline-primary" id="send" 
                    onClick="collect();">Create Account </input>

4. 避免页面重新加载。将事件传递给方法调用。此外，请防止您的方法定义中出现默认行为。

<!-- HTML code. -->

<button type="button" class="btn btn-outline-primary" id="send" 
                    onClick="collect(event);">Create Account </button>

// JavaScript Ajax code.

function collect(event){

    event.preventDefault();

    $.ajax({

        // ...

    });

    // ...

}