Cách lấy dữ liệu từ API và hiển thị trong bảng HTML
Có một vài phương pháp sử dụng mà bạn có thể sử dụng lấy dữ liệu từ cơ sở dữ liệu trong PHP và hiển thị nó vào bảng HTML. Trong hướng dẫn này, chúng tôi đã giải thích phương pháp sau để lấy dữ liệu từ cơ sở dữ liệu trong PHP và hiển thị nó trong bảng HTML Show
1) Chương trình cơ bản sử dụng Loop
đầu ra 2) Sử dụng AjaxMã tệp HTML
Mã tệp PHP
đầu ra 3) Sử dụng Bảng dữ liệuMã tệp HTML
Mã tệp PHP
đầu ra Trong bài viết này, tôi sẽ giải thích bằng một ví dụ, cách tìm nạp Dữ liệu từ API và hiển thị trong Bảng HTML bằng ReactJS Bài viết này sẽ sử dụng ASP. Net MVC và ReactJS. Net dưới dạng phụ trợ
Chuỗi JSON được trả về từ API Chuỗi JSON sau đây được trả về từ API kiểm tra ASPSnippets [ { "ID khách hàng". 1, "Tên". "John Hammond", "Quốc gia". "Hoa Kỳ" }, { "ID khách hàng". 2, "Tên". "Mudassar Khan", "Quốc gia". "Ấn Độ" }, { "ID khách hàng". 3, "Tên". "Suzanne Mathews", "Quốc gia". "Pháp" }, { "ID khách hàng". 4, "Tên". "Robert Schneider", "Quốc gia". "Nga" } ]
Thông tin phần mềm Bài viết này sử dụng Visual Studio 2019, MVC 5 và. Khung lưới 4. 5
Tích hợp ReactJS với ASP. mạng MVC Để biết thêm thông tin về việc tích hợp ReactJS với ASP. Net MVC, vui lòng tham khảo bài viết của tôi ASP. Ví dụ về Net MVC ReactJS Xin chào thế giới
Bộ điều khiển Bộ điều khiển bao gồm phương thức Hành động sau Phương thức hành động để xử lý thao tác GET Bên trong phương thức Hành động này, chỉ cần trả về Chế độ xem lớp công khai HomeController. Bộ điều khiển { // NHẬN. Trang chủ công khai ActionResult Index() { return View(); } }
Tệp ReactJS JSX Đang theo dõi ReactJS. tệp jsx bao gồm một lớp CustomerTable mở rộng Thành phần ReactJS Hàm tạo Bên trong Construtor, biến props được gửi đến super class để nó có thể được sử dụng sau này trong hàm render Sau đó, một Mảng có tên là customers được gán cho trạng thái
Trình xử lý sự kiện thành phầnDidMount Hàm này được gọi khi Thành phần phản ứng được tải trong DOM Bên trong chức năng này, một lệnh gọi AJAX tên miền chéo được thực hiện tới API bên ngoài bằng cách sử dụng API tìm nạp Và bên trong trình xử lý sự kiện thành công của Fetch API, phản hồi nhận được được đặt trong Mảng trạng thái của khách hàng bằng cách sử dụng hàm setState
chức năng kết xuất Hàm Kết xuất trả về một Bảng HTML có Hàng Tiêu đề và các hàng động được tạo bằng cách sử dụng mảng khách hàng Bên trong chức năng Kết xuất, với sự trợ giúp của chức năng bản đồ, các hàng của Bảng được tạo động bằng cách sử dụng Mảng khách hàng Cuối cùng, ReactDOM. chức năng kết xuất, kết xuất lớp trong HTML DIV có ID dvCustomersGrid lớp Bảng khách hàng mở rộng Phản ứng. Thành phần { hàm tạo(props) { siêu(đạo cụ); cái này. trạng thái = { khách hàng. [] } } thành phầnDidMount() { tìm nạp("https. // thô. githubusercontent. com/aspsnippets/test/master/Khách hàng. json") . sau đó (res => res. json()) . sau đó( (khách hàng) => { này. setState({ khách hàng. khách hàng }); }, (lỗi) => { cảnh báo (lỗi); } ) }
kết xuất () { return (<bảng cellPadding="0" cellSpacing="0"> <đầu> <tr> <th>ID khách hàngth> <th>Tênth> <th>Quốc giath> tr> đầu>
<tbody> {này. tình trạng. khách hàng. bản đồ(khách hàng => <tr> <td>{customer. Mã khách hàng}td> <td>{customer. Tên}td> <td>{customer. Quốc gia}td> tr> )} tbody> bảng>); } }
phản ứngDOM. kết xuất ( <Bảng khách hàng />, tài liệu. getElementById('dvCustomersGrid') );
Xem Chế độ xem bao gồm HTML DIV dvCustomersGrid bên trong đó Bảng HTML được tạo từ ReactJS sẽ được hiển thị Làm cách nào để tìm nạp dữ liệu từ API và hiển thị trong bảng HTML trong React?Tìm nạp và hiển thị dữ liệu từ API trong React JS . Bước 1 – Tạo ứng dụng React Bước 2 – Cài đặt Bootstrap Bước 3 – Tạo Thành phần Danh sách Bước 4 – Nhập thành phần danh sách trong ứng dụng. js Làm cách nào để lấy dữ liệu từ cơ sở dữ liệu và hiển thị trong bảng HTML?Hiển thị dữ liệu trong bảng HTML bằng PHP & MySQL . Kết nối PHP với cơ sở dữ liệu MySQL Chèn dữ liệu vào bảng PHPMyAdmin Lấy dữ liệu từ bảng MySQL Hiển thị dữ liệu trong bảng HTML Tự kiểm tra để chèn dữ liệu Làm cách nào để tìm nạp dữ liệu từ API và hiển thị trong bảng HTML trong Angular?Cách tìm nạp dữ liệu từ API và hiển thị bảng HTML trong Angular 14 . Bước 1 - Tạo ứng dụng góc mới Bước 2 – Nhập mô-đun HTTP Bước 3 – Tạo List Html trong View File Bước 4 – Tạo dịch vụ cho Api Bước 5 – Sử dụng Dịch vụ Api trong Thành phần Bước 6 - Bắt đầu ứng dụng góc Làm cách nào để tìm nạp dữ liệu từ API và hiển thị trong bảng HTML bằng jQuery?Mã jQuery sử dụng phương thức getJSON() để tìm nạp dữ liệu từ vị trí của tệp bằng yêu cầu AJAX HTTP GET . Phải mất hai đối số. Một là vị trí của tệp JSON và một là hàm chứa dữ liệu JSON. Hàm each() được sử dụng để lặp qua tất cả các đối tượng trong mảng. |