Laravel通过AJAX调用路由出现错误URL导致404未找到问题求助

Hey there, let's figure out why your AJAX delete request is hitting the wrong URL and throwing that 404 error. Here are the most common fixes to resolve this issue:

1. Double-check your button's data-url attribute #

The most likely culprit is that your delete button isn't carrying the correct target URL for the delete action. Make sure you're using Laravel's route() helper to generate the proper delete route URL, instead of hardcoding or referencing the wrong path:

<!-- Correct button setup with dynamic delete URL -->
<button type="button" class="delete-btn" data-url="{{ route('batches.destroy', $batch->id) }}">
  Delete Batch
</button>

Note: Using type="button" prevents the button from triggering a form submission (if it's inside a form) which can accidentally use the current page's URL.

2. Fix your AJAX script to correctly read the URL #

Ensure your JavaScript is pulling the URL directly from the clicked button's data-url attribute, not using a hardcoded or incorrect value. Here's a corrected script example:

$('.delete-btn').click(function(e) {
    e.preventDefault(); // Block any default button/form behavior
    const deleteUrl = $(this).data('url'); // Grab the URL from the clicked button

    Swal.fire({
        title: 'Are you sure?',
        text: "This action can't be undone!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!'
    }).then((result) => {
        if (result.isConfirmed) {
            // Debug: Check the URL in your browser console to verify it's correct
            console.log('Target Delete URL:', deleteUrl);
            
            $.ajax({
                url: deleteUrl, // Use the valid URL from the button
                type: 'DELETE',
                headers: {
                    // Make sure CSRF token is included (required for Laravel DELETE requests)
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    Swal.fire('Deleted!', 'The batch has been removed.', 'success')
                        .then(() => window.location.href = "{{ route('batches.index') }}"); // Redirect to list page
                },
                error: function(xhr) {
                    Swal.fire('Error!', 'Failed to delete the batch.', 'error');
                }
            });
        }
    });
});

3. Verify your delete route definition #

Check your web.php file to ensure the delete route is properly defined. For RESTful resources, it should look like this:

// Resource route (automatically creates the destroy/delete route)
Route::resource('contributions/batches', BatchController::class);

// Or manual delete route definition
Route::delete('/contributions/batches/{batch}', [BatchController::class, 'destroy'])->name('batches.destroy');

Run php artisan route:list in your terminal to confirm the batches.destroy route maps to the correct URL (it should look like /contributions/batches/{batch}, not the edit page URL you're seeing).

4. Rule out form submission interference #

If your delete button is nested inside an edit form, it might be triggering the form's default submit action (which uses the edit page URL). Adding e.preventDefault() to your click handler (as shown in the script above) or setting the button's type="button" will prevent this conflict.

内容的提问来源于stack exchange，提问作者C. Gill