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

Posted 2023-05-08

【中文标题】Laravel Ajax 请求使用 post 方法抛出 MethodNotAllowedException

【英文标题】：Laravel Ajax request throwing MethodNotAllowedException with post method

【发布时间】：2021-12-31 05:29:07

【问题描述】：

我是 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

【问题讨论】：

我已经通过从表单中获取路径解决了这个问题。通过这行代码 $.ajax( url: $('form#add-user-form').attr('action'), method: 'post', ...

太好了，你想通了。我实际上已经在我的回答中注意到了这一点。？？？？ ***.com/a/70052884/7376590

【参考方案1】：

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

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

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

---

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

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

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

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

【参考方案2】：

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

【讨论】：

能否请您给我一个如何添加路线的示例？

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

让 Laravel 为你处理 ajax URL。在您的 ajax URL 中使用 route('users.store')。它可能会解决您的问题。

@Hadem 您只需将文件routes/web.php 的内容移动到routes/api.php，或者如果不起作用，您可以尝试@Mehdi Hosseini 的解决方案

【参考方案3】：

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

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

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

【参考方案4】：

下面的路线不存在。

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

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

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

注意事项：

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

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

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

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

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

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

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

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

<!-- 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(

        // ...

    );

    // ...