jQuery AJAX laravel 6 Delete Data from database

Today, We want to share with you jQuery AJAX laravel 6 Delete Data from database.In this post we will show you laravel ajax delete method not allowed, hear for How to delete data from database using Laravel jQuery Ajax? we will give you demo and example for implement.In this post, we will learn about update or edit mysql data in laravel using ajax with datatables with an example.

jQuery AJAX laravel 6 Delete Data from database

There are the Following The simple About Delete data using AJAX with Laravel and MySQL Full Information With Example and source code.

As I will cover this Post with live Working example to develop How to delete multiple rows with checkbox using ajax in PHP Laravel 6 with example, so the delete row in laravel using ajax is used for this example is following below.

Step 1: Define a laravel Route

web.php

Route::POST('/memberInformation/getMemberInfo','[email protected]');

Route::resource('/memberInformation','MemberInfoController');

Step 2: Create a controller

memberInformationController.php (controller)

public function index()
    {
            return view('memberInformation.index');
    }
public function getMemberInfo(){
        $memberInformation = MemberInfo::get();
        return json_encode(array('data'=>$memberInformation));
    }

public function destroy($id)
    {
        MemberInfo::find($id)->delete();
        
        return json_encode(array('statusCode'=>200));
       
    }

Step 3: Laravel Model

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.

memberInformation.php (model)

class MemberInfo extends Model
{
    protected $table = 'members_details';
    protected $fillable = [
        'type','name', 'email','mobile','address'
    ];
}
     

Step 4: Blade View File

index.blade.php

@extends('memberInformation.layout')
 
@section('content')
    <div class="row">
        <div class="col-lg-12 margin-tb">
            <div class="pull-left">
                <h2>PHP Laravel 6 CRUD using jQuery Ajax</h2>
            </div>
            <div class="pull-right">
                <a class="btn btn-success" href="{{ route('memberInformation.create') }}"> Create New Member</a>
            </div>
        </div>
    </div>
   
    @if ($message = Session::get('success'))
        <div class="alert alert-success">
            <p>{{ $message }}</p>
        </div>
    @endif
   
    <table class="table table-bordered table-sm">
       <thead>
        <tr>
            <th>No</th>
            <th>Member First Name</th>
            <th>email</th>
            <th>Mobile</th>
		    <th>Address</th>
            <th width="280px">Action</th>
        </tr>
       </thead>
       <tbody id="table_content">

       </tbody>  
    </table>
      
<script>
        $(document).ready(function() {
            var url = "{{URL('memberInformation')}}";
            $.ajax({
                url: "/memberInformation/getMemberInfo",
                type: "POST",
                data:{ 
                    _token:'{{ csrf_token() }}'
                },
                cache: false,
                dataType: 'json',
                success: function(responseOutput){
                    console.log(responseOutput);
                    var responseInfo = responseOutput.data;
                    var table_content = '';
                    var i=1;
                    $.each(responseInfo,function(index,row){
                        var editUrl = url+'/'+row.id+"/edit";
                        table_content+="<tr>"
                        table_content+="<td>"+ i++ +"</td><td>"+row.name+"</td><td>"+row.email+"</td><td>"+row.mobile+"</td>"
                        +"<td>"+row.address+"</td><td><a class='btn btn-primary' href='"+editUrl+"'>Edit</a>" 
                        +"<button class='btn btn-danger delete' value='"+row.id+"' style='margin-left:20px;'>Delete</button></td>";
                        table_content+="</tr>";
                        
                    })
                    $("#table_content").append(table_content);
                }
            });


    $(document).on("click", ".delete", function() { 
        var $ele = $(this).parent().parent();
        var id= $(this).val();
        var url = "{{URL('memberInformation')}}";
        var dltUrl = url+"/"+id;
		$.ajax({
			url: dltUrl,
			type: "DELETE",
			cache: false,
			data:{
				_token:'{{ csrf_token() }}'
			},
			success: function(responseOutput){
				var responseOutput = JSON.parse(responseOutput);
				if(responseOutput.statusCode==200){
					$ele.fadeOut().remove();
				}
			}
		});
	});
        
});
</script>
@endsection
    

Step 5: Layout File

layout.blade.php

    <!DOCTYPE html>
    <html lang="{{ app()->getLocale() }}">
    <head>
        <title>PHP Laravel 6 CRUD using jQuery Ajax</title>
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
    </head>
    <body>
      
    <div class="container">
        @yield('content')
    </div>
       
    </body>
    </html>

Web Programming Tutorials Example with Demo

Read :

Another must read:  Angularjs Store in Localstorage - ngStorage

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Ajax CRUD operations in laravel 6.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Leave a Reply

Your email address will not be published. Required fields are marked *