Hướng dẫn show data ajax php - hiển thị dữ liệu ajax php

Sử dụng ajax để hiện dữ liệu từ database hướng dẫn tạo request bằng javascript tới server để lấy dữ liệu về mà không cần nạp trang lại.


1. Giới thiệu kỹ thuật Ajax

  • Ajax là kỹ thuật tạo request đển server mà không cần phải nạp lại trang.
  • Web developer có thể thực hiện request đến server bằng nhiều cách: hàm fetch trong javascript hoặc dùng các thư viện như jquery, angularjs…cũng đều được.
  • Kỹ thuật này giúp lập trình viên rất uyển chuyển trong việc xử lý nhiều vấn đề ở client mà cần đến dữ liệu hoặc hỗ trợ từ phía server. Ví dụ: check ngay username trong trang đăng ký thành viên, hiện lại captcha khác, nạp dữ liệu vào trang mà không làm reload trang
  • Tham khảo thêm : video đăng ký thành viên trong kênh thầy long web
  • Video này hướng dẫn bạn sử dụng ajax để lấy dữ liệu từ server về hiện trong trang web mà không cần nạp lại trang.

2. Chuẩn bị

Tạo database thaylongweb_tintuc và import dữ liệu. Tải database: thaylongweb_tintuc

3. Ứng dụng Ajax để hiện tin theo loại

Tạo trang tintrongloai.php để hiện danh sách tin

query($sql);
  $loaitin = $conn->query("SELECT idLT, Ten FROM loaitin");
?>

    

Đăng: - Xem

Tạo trang sử dụng ajax  với jquery


id="kq" class="bg-warning" style="min-height: 300px">

THẦY LONG WEB - DEMO AJAX

Kết quả xem trang như sau:

Hướng dẫn show data ajax php - hiển thị dữ liệu ajax php

– Sửa các chữ Link và bổ sung thuộc tính idLT để được như sau:





Thao tác với jquery

– Vào https://developers.google.com/speed/libraries#jquery để lấy code jquery , sẽ thấy code jquery cần dùng để nhúng vào trang:

Hướng dẫn show data ajax php - hiển thị dữ liệu ajax php

–  Nhúng code Jquery vào đầu trang web

– Code jquery gắn sự kiện click cho các tag a, xem


– Code jquery: request và hiện kết quả


Dữ liệu lúc này sẽ hiện trong trang, không qua trang mới, không nạp lại trang. Website chạy rất nhanh

Chú ý: Nếu không dùng jquery, code javascript thuần cũng được:


4. Ứng dụng ajax để hiện huyện theo tỉnh

Tạo 2 table trong database như sau:

Hướng dẫn show data ajax php - hiển thị dữ liệu ajax php
Hướng dẫn show data ajax php - hiển thị dữ liệu ajax php

Tạo file laytinh.php

prepare("SELECT idTinh, loai, tenTinh  FROM tinh");    
$stmt->execute();    
$data  = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($data);
?>

Tạo file layhuyentrongtinh.php

prepare("SELECT idHuyen, loai, tenHuyen  FROM huyen WHERE idTinh=?");    
$stmt->execute([$idTinh]);    
$data  = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($data);
?>

Tạo file tinh-huyen.php


Code Ajax lấy tỉnh


id="kq" class="bg-warning" style="min-height: 300px">

THẦY LONG WEB - DEMO AJAX

0

Code Ajax lấy huyện trong tỉnh


id="kq" class="bg-warning" style="min-height: 300px">

THẦY LONG WEB - DEMO AJAX

1

Sử dụng ajax để hiện dữ liệu từ database là kiến thức quan trọng bạn cần biết giúp bạn rất linh động khi triển khai các chức năng trong trang web của mình.

https://www.youtube.com/watch?v=dWX48p60tBw