Laravel 9 Fetch records from MySQL with jQuery AJAX
In this post, we will give you information about Laravel 9 Fetch records from MySQL with jQuery AJAX. Here we will give you detail about Laravel 9 Fetch records from MySQL with jQuery AJAX And how to use it also give you a demo for it if it is necessary.
Retrieving data is one of the basic requirements when working with the database using AJAX. Showing data based on the user login, generating a report, etc.
In this post, I show how you can fetch records from MySQL database using jQuery AJAX in Laravel 9.
1. Database Configuration
Open .env file.
Specify the host, database name, username, and password.
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=employee DB_USERNAME=root DB_PASSWORD=
2. Table structure
Create a new table employees using migration.
php artisan make:migration create_employee_table
Now, navigate to database/migration/ folder from the project root.
Find a PHP file that ends with create_employee_table and open it.
Define the table structure in the up() method.
public function up()
{
Schema::create('employees', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('username');
$table->string('name');
$table->string('email');
$table->timestamps();
});
}
Run the migration –
php artisan migrate
The table is been created and I added some records to it.
3. Model
Create Employees Model.
php artisan make:model Employees
Open app/Models/Employees.php file.
Specify mass assignable Model attributes – username, name, and email using the $fillable property.
Completed Code
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Employees extends Model
{
use HasFactory;
protected $fillable = [
'username','name','email'
];
}
4. Controller
Create a EmployeeController controller.
php artisan make:controller EmployeeController
Create 3 methods –
index() – Load employees view.
getUsers() – This method is used to handle AJAX GET request.
Fetch all records from the employees table and assign to $employees. Assign $employees to $response[‘data’] Array.
Return $response Array in JSON format.
getUserbyid() – This method is used to handle AJAX POST request. Read POST value and assign to the $userid variable.
Search record by id from the employees table. Assign $employees to $response[‘data’] Array.
Return $response Array in JSON format.
Completed Code
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Employees;
class EmployeeController extends Controller
{
public function index(){
return view('employees');
}
public function getUsers(){
$employees = Employees::orderby('id','asc')->select('*')->get();
// Fetch all records
$response['data'] = $employees;
return response()->json($response);
}
public function getUserbyid(Request $request){
$userid = $request->userid;
$employees = Employees::select('*')->where('id', $userid)->get();
// Fetch all records
$response['data'] = $employees;
return response()->json($response);
}
}
5. Route
Open routes/web.php file.
Define 3 routes –
/ – Load employees view.
/getUsers – This use to send AJAX GET request.
/getUsersbyid – This use to send AJAX POST request.
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\EmployeeController;
Route::get('/', [EmployeeController::class, 'index']);
Route::get('/getUsers', [EmployeeController::class, 'getUsers']);
Route::post('/getUserbyid', [EmployeeController::class, 'getUserbyid']);
6. View
[/php]
Create employees.blade.php file in resources/views/.
[/php]
HTML
Create a textbox to enter user id and 2 buttons. 1st button to fetch record by user id and 2nd button to fetch all users list.
Use