Laravel Ajax Get Data From Database Step By Step

Brijpal Sharma
php laravel ajax Publish on:-September 20th, 2020 , Category:- Web Development

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

On the click button, you see the result.

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

Brijpal Sharma

Hello, My Name is Brijpal Sharma. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of Codermen. I started this blog to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers...

0 Comments

You must be logged in to post a comment.