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.

Read Also:  jquery multiple Image Upload with preview and Delete using PHP

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:  PHP Laravel Limit String Length (Truncate string) Example

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. Read Also:  Automatically Activate WordPress Plugins programmatically
  2. Read Also:  Bootstrap carousel slider with thumbnail image gallery
  3. Read Also:  Select DropDown Option Selected In Laravel
  4. Read Also:  Laravel 6 return view jQuery ajax request example
  5. Read Also:  Multilevel and Multiple inheritance in PHP
  6. Read Also:  Build Push Notification System with PHP & MySQL - notification alert in php mysql
  7. Read Also:  Delete Table Rows Using PHP JQuery Ajax
  8. Read Also:  8 Useful PHP Tips Tricks and Best Practices
  9. Read Also:  Number Filter using Angular Example
  10. Read Also:  onclick update database in laravel