Laravel资源控制器Destroy方法Ajax调用报404错误求解

Hey there, let's break down why you're hitting that 404 error and fix it step by step:

1. Your AJAX URL is Incorrect #

Looking at your route configuration, you've added a prefix('admin') to your resource routes. That means the valid delete endpoint for your blog isn't /blog/{id} — it's /admin/blog/{id}. Your current AJAX call is targeting the wrong URL, which is why Laravel can't locate the route.

Fixed AJAX URL: #

url: '/admin/blog/' + id,

2. Missing CSRF Token (Critical for Laravel Requests) #

Laravel requires a CSRF token to validate non-GET requests like DELETE. Without it, your request might get rejected (this can sometimes show up as a 404 or 419 error). Here's how to add it properly:

First, ensure you have this meta tag in your blade template's <head> section:

<meta name="csrf-token" content="{{ csrf_token() }}">

Then include the token in your AJAX request headers:

$.ajax({ 
    type: 'DELETE', 
    url: '/admin/blog/' + id, 
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    // ... rest of your code
})

3. Controller Method Improvements #

Your current destroy method has two key issues:

• If Blogs::find($id) returns null (no blog matches the given ID), calling $blog->delete() will throw a fatal error.
• Using echo instead of a proper JSON response can cause parsing issues in your frontend.

Fixed Controller Code: #

public function destroy($id) { 
    $blog = Blogs::find(intval($id)); 

    // Return 404 if no blog exists with the given ID
    if (!$blog) {
        return response()->json(['success' => false], 404);
    }

    $deleted = $blog->delete();
    return response()->json(['success' => $deleted]);
}

4. Frontend Selector Fix #

In your success callback, $("item-"+id).remove() is missing a selector prefix. If your element uses an ID like item-123, you need to add the # selector to target it correctly:

$("#item-" + id).remove()

Final Working AJAX Code #

Putting all fixes together, your AJAX code should look like this:

$('.btn-danger').click(function () { 
    const id = $(this).attr('id'); 
    alertify.confirm("Want to delete?", "It's not possible to turn back!", function () { 
        $.ajax({ 
            type: 'DELETE', 
            url: '/admin/blog/' + id, 
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function (response) { 
                if (response.success){ 
                    $("#item-" + id).remove();
                    alertify.success('Done!');
                } else{ 
                    alertify.error('There\'s an error!');
                } 
            }, 
            error: function (jqXHR, textStatus, errorThrown) { 
                let msg = ''; 
                if (jqXHR.status === 0) { 
                    msg = 'Not connect.\n Verify Network.'; 
                } else if (jqXHR.status == 404) { 
                    msg = 'Requested page not found. [404]'; 
                } else if (jqXHR.status == 500) { 
                    msg = 'Internal Server Error [500].'; 
                } else if (textStatus === 'parsererror') { 
                    msg = 'Requested JSON parse failed.'; 
                } else if (textStatus === 'timeout') { 
                    msg = 'Time out error.'; 
                } else if (textStatus === 'abort') { 
                    msg = 'Ajax request aborted.'; 
                } else { 
                    msg = 'Uncaught Error.\n' + jqXHR.responseText; 
                } 
                alertify.error(msg);
            } 
        }); 
    }, function () { 
        alertify.error('Deleting cancelled.');
    }); 
});

内容的提问来源于stack exchange，提问作者Emrecan Özkan