此路由不支持 POST 方法。支持的方法：GET、HEAD。 - {Ajax、jQuery、Laravel}

Question

我正在尝试通过单击按钮来删除图像。我正在使用 jQuery ajax 将 post 请求发送到后端，后端是 Laravel。当单击按钮并且我没有使用表单时，我正在触发 POST 请求。我不确定这是否是正确的方法。非常感谢任何想法/建议。

这是我的html代码

<div class="deal-images-in-new-deal-modal" id="deal-images-after-uploading-section" style="display:flex; justify-content: center; padding:10%; flex-wrap: wrap;"> 
  <div class="new-deal-upload-image">                                 
    <img src="" width="150" height="150">                              
  </div>                             
  <div class="new-deal-upload-icon">                                 
    <button type="submit" class="btn delete_image_button" id="after_image_upload_0" value="151159">                                     
      <i class="trash icon" id="after_image_upload" style="color:red;"></i>                                 
    </button>                             
  </div> 
  <div class="new-deal-upload-image">                                 
    <img src="" width="150" height="150">                              
  </div>                             
  <div class="new-deal-upload-icon">                                 
    <button type="submit" class="btn delete_image_button" id="after_image_upload_1" value="151160">                                     
      <i class="trash icon" id="after_image_upload" style="color:red;"></i>                                
   </button>                             
  </div> 
  <div class="success-message">Test</div>
</div>

这是 JS 脚本文件

$(document).on('click', '.delete_image_button',function(e) {
    e.preventDefault();
   var image_id = $(this).val();


    $.ajax({
        type: "POST",
        url: '/deals/delete-image/'.image_id,
        dataType: 'JSON',
        success: function(data) {
            console.log("inside success fuction", data);
            html = "<div id='success-message'>The image id is "+data+"</div>";
            $('.success-message').replaceWith(html);
        }
    });
});

这是 Laravel Routes 文件中的路由 Routes.php

Route::post('deals/delete-image/{image_id}','MainController@deleteImages');

这是代码 laravel 控制器文件

MainController.php

public function deleteDealImages($image_id) {
        \Log::info("inside deleteDealImages function in back end");
        return $image_id;
    } 

我收到带有错误响应的 405 状态代码

{
    "message": "The POST method is not supported for this route. Supported methods: GET, HEAD.",
    "exception": "Symfony\\Component\\HttpKernel\\Exception\\MethodNotAllowedHttpException",
    "file": "/var/www/vendor_portal/vendor/laravel/framework/src/Illuminate/Routing/AbstractRouteCollection.php",
    "line": 117
}

我尝试了许多不同的方法，但仍然不断收到此错误。有人可以帮我解决这个问题吗？

Answer 1

在您的 javascript 代码中，在连接字符串的 ajax url 部分中，您应该使用“+”而不是“.”

你的代码

$.ajax({
    type: "POST",
    url: '/deals/delete-image/'.image_id,
    dataType: 'JSON',
    success: function(data) {
        console.log("inside success fuction", data);
        html = "<div id='success-message'>The image id is "+data+"</div>";
        $('.success-message').replaceWith(html);
    }
});

你应该写的代码

$.ajax({
    type: "POST",
    url: '/deals/delete-image/' + image_id,
    dataType: 'JSON',
    success: function(data) {
        console.log("inside success fuction", data);
        html = "<div id='success-message'>The image id is "+data+"</div>";
        $('.success-message').replaceWith(html);
    }
});