Home Ajax Laravel Ajax DELETE Request Example

Laravel Ajax DELETE Request Example

by Shahriar Sagor

Hello dev’s today now in this post my main topic is laravel ajax delete request example . Now in this post i will give you a very simple example of ajax delete request in laravel example. Here I would like to share with you an example of ajax delete request with parameters laravel. if you want to know about an example of laravel ajax delete request with parameter then i hope you are the right place. Alright, let’s start and dive into the steps.

In this example, i will create a list of users also with a delete button. When we click on the delete button then i will be open the confirm box and then delete data by using ajax delete method. We can delete data by using jquery ajax get in laravel 6, laravel 7, laravel 8 and laravel 9 any version as well.

Let’s start and follow the below steps:

Step 1: Install Laravel

This is a optional; however, if we have not created the laravel application, then we may go ahead and need to execute the below command:

composer create-project laravel/laravel example-app

Step 2: Create Dummy Users

Here, i will create some dummy records on users table and then import them.

so let’s need to run the following commands:

Create Dummy Records:

php artisan tinker
User::factory()->count(20)->create()

Let’s update the following code to our controller file:

app/Http/Controllers/UserController.php

<?php
   
namespace App\Http\Controllers;
    
use Illuminate\Http\Request;
use App\Models\User;
    
class UserController extends Controller
{
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function index()
    {        
        $users = User::paginate(10);
 
        return view('users', compact('users'));
    }
 
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function delete($id)
    {
        User::find($id)->delete();
  
        return response()->json(['success'=>'User Deleted Successfully!']);
    }
}

Step 4: Add Route

Now in this is step i have to create a route for listing users. So open your “routes/web.php” file and then add following route.

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\UserController;
  
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
  
Route::get('users', [UserController::class, 'index']);
Route::delete('users/{id}', [UserController::class, 'delete'])->name('users.delete');

Step 5: Create View

This is the last step, so let’s create the users.blade.php(resources/views/users.blade.php) for layout and then i will write design code here and put the following code:

resources/views/users.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Ajax DELETE Request Example  - CodingsPoint.com</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
    <meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
        
<div class="container">
    <h1>Laravel Ajax DELETE Request Example - CodingsPoint.com</h1>
    
    <table class="table table-bordered data-table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @foreach($users as $user)
            <tr>
                <td>{{ $user->id }}</td>
                <td>{{ $user->name }}</td>
                <td>{{ $user->email }}</td>
                <td>
                    <a 
                        href="javascript:void(0)" 
                        id="delete-user" 
                        data-url="{{ route('users.delete', $user->id) }}" 
                        class="btn btn-danger"
                        >Delete</a>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
  
</div>
      
</body>
  
<script type="text/javascript">
      
    $(document).ready(function () {
   
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
      
        /*------------------------------------------
        --------------------------------------------
        When click user on Show Button
        --------------------------------------------
        --------------------------------------------*/
        $('body').on('click', '#delete-user', function () {
  
          var userURL = $(this).data('url');
          var trObj = $(this);
  
          if(confirm("Are you sure you want to remove this user?") == true){
                $.ajax({
                    url: userURL,
                    type: 'DELETE',
                    dataType: 'json',
                    success: function(data) {
                        alert(data.success);
                        trObj.parents("tr").remove();
                    }
                });
          }
  
       });
        
    });
    
</script>
      
</html>

Run Laravel App:

That’s good all the required steps have been done. So now we have to type the given below command and then hit enter to run the Laravel appliction:

php artisan serve

Read Also: php artisan serve not working in Laravel

Thanks for read. I hope it help you. For more you can follow us on facebook

close

You may also like