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\BlogController@blogList');
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:wght@400;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

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

Brijpal Sharma is a web developer with a passion for writing tech tutorials. Learn JavaScript and other web development technology.