此路由不支持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');

下面是控制器文件

的代码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);
}
});