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
- Chương trình cơ bản sử dụng Loop
- Sử dụng Ajax
- Sử dụng bảng dữ liệu
1] Chương trình cơ bản sử dụng Loop
0]{
}else{
$msg = "No Record found";
}
}
?>
HTML and PHP code
Display user list using HTML and PHP
Name
Email
Status
Registrating Date
đầu ra
2] Sử dụng Ajax
Mã tệp HTML
HTML and PHP code
Display user list using HTML and PHP
Name
Email
Registrating Date
Mã tệp PHP
0]{
$result_array = array[];
while[$row = mysqli_fetch_assoc[$result]]{
array_push[$result_array, $row];
}
}
echo json_encode[$result_array];
}
?>
đầu ra
3] Sử dụng Bảng dữ liệu
Mã tệp HTML
HTML and PHP code
Display user list using HTML and PHP
Name
Email
Registrating Date
Mã tệp PHP
0]{
$result_array = array[];
while[$row = mysqli_fetch_assoc[$result]]{
array_push[$result_array, $row];
}
}
$results = ["sEcho" => 1,
"iTotalRecords" => count[$result_array],
"iTotalDisplayRecords" => count[$result_array],
"aaData" => $result_array ];
echo json_encode[$results];
}
?>
đầ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 [
ID khách hàng
Tên
Quốc gia
{này. tình trạng. khách hàng. bản đồ[khách hàng =>
{customer. Mã khách hàng}td>
{customer. Tên}td>
{customer. Quốc gia}td>
]}
];
}
}
phản ứngDOM. kết xuất [
,
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ị