Theo đuổi ngành CNTT, vậy bạn đã có kỹ năng sử dụng Ajax và PHP hay chưa? Hãy cùng tìm hiểu thêm qua bài viết sau đây!

Trong bài này, chúng ta sẽ sử dụng kỹ thuật tải thêm dữ liệu bằng cách sử dụng ajax trong PHP. Đây là cách mà rất nhiều website ngày nay đang sử dụng để hiển thị thêm nội dung. Ở đây, bạn sẽ học cách làm cho website tải thêm nhiều nội dung hơn bằng cách sử dụng nút “Xem thêm”. Hướng dẫn này sẽ cung cấp cho bạn một ví dụ đơn giản về cách tải thêm kết quả trong PHP, Ajax và cơ sở dữ liệu MySQL.

AJAX là gì?

AJAX là từ viết tắt của từ Asynchronous JavaScript And XML – Bất đồng bộ trong Javascript và XML. Các bạn có thể đọc chi tiết tại này. Trong bài, chúng ta sẽ sử dụng thư viện Jquery, ngôn ngữ PHP và MySQL để làm.

Chúng ta sẽ thực hiện bài này như hình sau:

Hình trên hiển thị danh sách sản phẩm nhưng không phải toàn bộ. Khi nhấn vào nút “Xem thêm” thì trang web sẽ tải thêm dữ liệu cho người xem, mỗi lần sẽ hiển thị thêm 8 sản phẩm. Đến khi không còn sản phẩm nút “Xem thêm” sẽ ẩn đi.

Các bước thực hiện:

1. Tạo cơ sở dữ liệu với bảng products

CREATE TABLE `products` (
`id` int(11) NOT NULL,
`product_name` varchar(200) NOT NULL,
`image` varchar(200) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

 2. Thêm một số bản ghi cho bảng products

INSERT INTO `products` (`id`, `product_name`, `image`) VALUES
(3, ‘Bản quyền thuộc về:Công Ty Mạng Lưới Cá Cược Bóng Đá di động Apple iPhone 12 – 64GB – chính hãng VN/A’, ‘apple-iphone-12-mini-3.png’),
(4, ‘Bản quyền thuộc về:Công Ty Mạng Lưới Cá Cược Bóng Đá di động Apple iPhone 13 – Chính hãng VN/A’, ‘image-removebg-preview-10.png’),
(5, ‘Bản quyền thuộc về:Công Ty Mạng Lưới Cá Cược Bóng Đá di động Apple iPhone 13 Pro Max – Chính hãng VN/A’, ‘image-removebg-preview-18.png’),
(6, ‘Laptop HUAWEI MATEBOOK 14 – KLVD-WDH9 (i5-1135G7/RAM 8Gb/512G/14.0\’/2K/Win 10 Home)’, ‘laptop-huawei-matebook-14-klvd-wdh9-5.png’),
(7, ‘Laptop Apple M1 – MacBook Air 13\” 16GB/256GB 2020 – Chính hãng Apple Việt Nam’, ‘capture.png’),
(8, ‘Laptop HP Gaming VICTUS 16-e0175AX – 4R0U8PA’, ‘hp-victus-16-e0175ax-4.png’),
(9, ‘Apple M1 – MacBook Pro 13\’ 512GB 2020 – Chính hãng Apple Việt Nam’, ‘Macbook Pro 13 inch (2020) with Touch bar-8.png’),
(10, ‘Bản quyền thuộc về:Công Ty Mạng Lưới Cá Cược Bóng Đá di động Samsung Galaxy S22 – 8GB/256GB – Chính hãng’, ‘image-removebg-preview-6.png’),
(11, ‘Tai nghe Apple AirPods Pro – Chính hãng Apple (MLWK3ZP/A, MagSafe)’, ‘image-removebg-preview (32).png’),
(12, ‘Phụ kiện Cáp Apple USB-C to Lightning Cable – Chính Hãng’, ‘1_637400092468013820.png’),

 3. File data.php, kết nối và xử lý dữ liệu phân trang sau đó trả về dữ liệu dạng JSON.

 4. File index.php

 5. File ajax.js

Như vậy, trên đây là cách để sử dụng dễ dàng Ajax và PHP trong công nghệ thông tin để ứng dụng vào các trang web, phần mềm, ứng dụng,.. Chúc các bạn học tốt với những kiến thức vừa rồi nhé!