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

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: 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 :

  PHP Laravel 5.7 Get IP Address 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.   Laravel Merge Multiple collections Object And Array
  2.   php array remove keys keep values example
  3.   PHP AJAX Live Search Box Autocomplete Using MySQL Database
  4.   Create Dynamic Image Slider using PHP with jQuery
  5.   Laravel AJAX Live Search Example
  6.   php parse XML File SimpleXML
  7.   Laravel 7 jQuery Ajax Request Tutorial
  8.   PHP Tutorial
  9.   how to insert data using ajax in laravel with datatables?
  10.   Upload Multiple Images With Image Preview Using jQuery,Ajax And PHP

Leave a Reply

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