Laravel Ajax Get Data From Database Step By Step

by

In this blog post, we learn how to ajax getting data from the database in laravel step by step.

Getting data by ajax from the database is a common requirement in web development. this is a very easy and simple method. so let’s start to do this task.

I hope you installed the Laravel project and make a database connections in your Laravel .env file.

Step: 1 Create a new table and insert some rows of data.

To create a table can use the migration command manually. For this tutorial, I am using a migration command and migrate to a new table. run the flowing command to generate migration, modal, and controller.

php artisan make:model Blog -mcr

After that update the Blog migration file. 

 public function up()
    {
        Schema::create('blogs', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->string('description');
            $table->timestamps();
        });
    }

Step: 2 Update BlogController.php 

Update Controller BlogController.php. Here I fetch data from the Blog table and return data 

<?php

namespace App\Http\Controllers;

use App\Models\Blog;
use Illuminate\Http\Request;

class BlogController extends Controller
{
   public function blogList()
   {
       # code...
       $blog = Blog::find(1);
       return response()->json($blog, 200);
   }
}

Step: 3 Make Route for get data

Route::get('get-blog-list','App\Http\Controllers\[email protected]');

Step: 4 Make a view page for data view

welcome.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
  <head>
    <meta charset=utf-8>
    <meta name=viewport content="width=device-width, initial-scale=1">

    <title>Laravel</title>
    <!-- Fonts -->
    <link href="//fonts.googleapis.com/css2?family=Nunito:[email protected];600;700&display=swap" rel="stylesheet">
    <!-- Styles -->
    <link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src=//stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js></script>
  </head>
  <body >
    <div >
      <a href="javascript:;" id="getData" >Get Data</a>
      <div >
        <div >
          <h1 id="title"></h1>
          <p id="description"></p>
        </h1>
        <div ></div>
      </div>
    </div>
    <script
    src=//code.jquery.com/jquery-3.5.1.min.js
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
    crossorigin=anonymous></script>
    <script type=text/javascript>
      $(document).ready(function() {
        $("#getData").click(function() { 
         $.ajax({  //create an ajax request to display.php
          type: "GET",
          url: "get-blog-list/",       
          success: function (data) {
            $("#title").html(data.title);
            $("#description").html(data.description);
          }
        });
      });
      });
      
      </script>


  </body>
</html>

when you run the app you see a button 

How to use Ajax in Laravel

So, here we complete the tutorial on Laravel Ajax Get Data From Database Step By Step. hope it helps you.

Leave a Comment