in this post, I will discuss how to integrate Ajax (Asynchronous JavaScript and XML) with Laravel 10. Two common libraries support AJAX call: jQuery and Vue.js, I am using vue.js to create AJAX calls to filter data and display into the listing page.
It allows for better responsiveness, real-time updates, and an easier-to-use search functionality. I have already shared tutorial: CRUD Functionality in Laravel
What’s Ajax
Ajax is a method that allows for the refresh of a webpage’s content without the need for a complete page reload. This technique facilitates dynamic, asynchronous communication between the client and server, It helps developers to design web applications that are more responsive and interactive.
What is Laravel
Laravel is a widely-used open-source PHP web application framework, that allows to creation of dynamic and interactive modern web applications.
Implementing AJAX in Laravel
We’ll look at a complete example of Laravel Ajax integration with Vue.js.
Setting Up the Laravel Project
Let’s start to create a new project, assuming you have Composer installed, Open your terminal to create your Laravel application by running the following command.
composer create-project --prefer-dist laravel/laravel laravel-ajax-vue-search cd laravel-ajax-vue-search
Create a Database and Table
Let’s create a ‘test’ database and create a new migration file using the below command:
php artisan make:migration create_employees_table --create=employees
The above command will generate a migration file into the "database/migrations" directory and define the table schema as follows:
// database/migrations/YYYY_MM_DD_create_employees_table.php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateEmployeesTable extends Migration
{
public function up()
{
Schema::create('employees', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->integer('salary');
$table->integer('age');
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists('employees');
}
}
Run the below migration command to create the database table into the database:
php artisan migrate
Connect Your database with Test db:
You need to edit your application’s .env file at the root of your Laravel application. Locate the variables prefixed with DB_ and edit them with your database credentials:
DB_CONNECTION=mysql DB_HOST=localhost DB_PORT=3036 DB_DATABASE=test DB_USERNAME=root DB_PASSWORD=pass
Replace “localhost,” “3036,” “test,” “root,” and “pass” with the actual values specific to your MySQL host configuration.
Creating a Model and Seeder
Let’s create a model for the "employees" table and a seeder to populate it with sample data. Run the following commands:
php artisan make:model Employee php artisan make:seeder CreateEmployeesTable
Line 1: The command will create a model file in "app/Models/Employee.php".
Line 2: It will create "EmployeesTableSeeder.php" file in the "database/seeders" directory:
Define the model:
// app/Models/Employee.php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Employee extends Model
{
use HasFactory;
protected $fillable = ['name', 'salary', 'age'];
}
Define Seeder logic:
// database/seeders/EmployeesTableSeeder.php
use Illuminate\Database\Seeder;
use App\Models\Employee;
class EmployeesTableSeeder extends Seeder
{
public function run()
{
Employee::create(['name' => 'Adam', 'age' => 25, 'salary' => 2345]);
Employee::create(['name' => 'Parvez', 'age' => 25, 'salary' => 1345]);
}
}
To add entries to the "employees" table, run the seeder:
php artisan db:seed --class=EmployeesTableSeeder
Creating Routes and Controller
Let’s set up routes and a controller for handling the Ajax requests. Open the web.php file in the "/routes" directory and define the routes:
// routes/web.php
use App\Http\Controllers\EmployeeController;
Route::get('/', [EmployeeController::class, 'index']);
Route::get('/employees', [EmployeeController::class, 'getEmployees']);
Route::get('/search', [EmployeeController::class, 'search']);
Generate a controller named “EmployeeController” with the following command:
php artisan make:controller EmployeeController
The above command will create a controller file "app/Http/Controllers/EmployeeController.php" and define the methods:
// app/Http/Controllers/EmployeeController.php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Employee;
class EmployeeController extends Controller
{
public function index()
{
return view('index');
}
public function getEmployees()
{
$emps = Employee::latest()->get();
return response()->json($emps);
}
public function search(Request $request)
{
$query = $request->input('query');
$emps = Employee::where('name', 'LIKE', "%$query%")->get();
return response()->json($emps);
}
}
Creating Laravel Views
Let’s create the views for our Laravel application. Create a file named "index.blade.php" in the "resources/views" directory. The file HTML structure is as follows:
<!-- resources/views/index.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel Ajax Vue Search Example</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div id="app" class="container mt-5">
<h2>Live Employee Search</h2>
<div class="form-group">
<input type="text" class="form-control" v-model="searchQuery" @input="searchEmp" placeholder="Search employee">
</div>
<ul class="list-group">
<li class="list-group-item" v-for="emp in emps" :key="emp.id">
@{{ emp.name }}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
In the above code, We’ve included the Bootstrap CSS for styling and created a simple form with an input field for the live search functionality. An unordered list of the search results is displayed.
Implementing Ajax in Laravel Using Vue.js
Create a JavaScript file named "app.js" in the “public/js” directory, an add below code into this file:
// public/js/app.js
const app = new Vue({
el: '#app',
data: {
emps: [],
searchQuery: '',
},
mounted() {
this.getEmployees();
},
methods: {
getEmployees() {
axios.get('/employees')
.then(response => {
this.emps = response.data;
})
.catch(error => {
console.log(error);
});
},
searchEmployees() {
axios.get('/search', { params: { query: this.searchQuery } })
.then(response => {
this.emps = response.data;
})
.catch(error => {
console.log(error);
});
},
},
});
in the above code, We have defined searchEmployees method that triggered on every input change in the search input field. The method of making an Ajax request to the "/search" endpoint with the current search query.
The server responds with a JSON array of matching employees and updates the UI to show the search results dynamically.
Import the JavaScript file in the view:
Open the "resources/views/index.blade.php" file and include the JavaScript file:
<!-- resources/views/index.blade.php -->
<!-- ... (existing code) ... -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
Run the Laravel Application
Let’s start the development server b y running the following command:
php artisan serve
Open your web browser and navigate to http://localhost:8000/ to see the list of employees.
Conclusion
We have implemented Ajax functionality with Vue in Laravel 10 and also added live search functionality in a web application using AJAX. You can use Ajax to create CRUD features in your application.
