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 :

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.


Related FAQ

Here are some more FAQ related to this Article:

  1.   Toggle Switch Button in VueJs Example
  2.   Select DropDown Option Selected In Laravel
  3.   Laravel 6 Ajax post data Example
  4.   Magento2 Get Logged in Customer Data using Email
  5.   jquery multiple Image Upload with preview and Delete using PHP
  6.   Laravel 6 JQuery Ajax Post Request Example
  7.   Best Most Popular JavaScript Frameworks comparison
  8.   paypal express checkout woocommerce Integration
  9.   Laravel 6 return view jQuery ajax request example
  10.   Download File from URL Using PHP