Laravel Ajax Get Data From Database 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.