laravel 6 Retrieve data using jQuery Ajax

Today, We want to share with you laravel 6 Retrieve data using jQuery Ajax.In this post we will show you Laravel 6 Fetch records from MySQL with jQuery AJAX, hear for Laravel 6 Simple Ajax CRUD Application we will give you demo and example for implement.In this post, we will learn about Laravel 6 Autocomplete Mutiple Fields Using jQuery, Ajax and MySQL with an example.

laravel 6 Retrieve data using jQuery Ajax

There are the Following The simple About How to retrieve data using Laravel, Ajax Full Information With Example and source code.

As I will cover this Post with live Working example to develop laravel ajax get data from database, so the laravel ajax post data to controller is used for this example is following below.

Step 1: Define a Laravel 6 Route

web.php

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

Step 2: Create a Controllers in Laravel

memberInformationController.php (controller)

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

Step 3: Create a Laravel Model

memberInformation.php (model)

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

Step 4: Create a Laravel Blade 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: Main Master Layout Blade 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 :

Read Also:  Simple Jquery ajax request example with demo

Summary

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

I hope you get an idea about pagination search using ajax jquery larave.
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.