PHP: Как получить и отобразить данные из базы данных в PHP с помощью Ajax
В этом руководстве вы узнаете, как получать и отображать данные из базы данных в PHP с помощью jQuery ajax.
В этом посте мы создадим список клиентов и добавим кнопку просмотра в этот список клиентов. После этого у нас будут извлекаться данные из базы данных при нажатии кнопки просмотра в PHP и отображать данные на веб-странице без перезагрузки всей веб-страницы с помощью jQuery ajax.
Как получить и отобразить данные из базы данных с помощью Ajax без обновления страницы
Выполните следующие шаги для того, чтоб научиться получать и отображать данные из базы данных MySQL в PHP с помощью ajax без перезагрузки веб-страницы:
Шаг 1 - Создать базу данных и таблицу
Прежде всего, перейдите на панель phpmyadmin и создайте базу данных и таблицу, используя следующий запрос sql:
CREATE DATABASE my_db;
CREATE TABLE `customers` (
`id` int(10) UNSIGNED NOT NULL,
`fname` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
`lname` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
`email` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
`created_date` date DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;Шаг 2 - Подключение к базе данных MySQL
На этом этапе вы создадите файл с именем mydbCon.php и обновите приведенный ниже код в свой файл.
Следующий код используется для создания подключения к базе данных MySQL в PHP. Кроме того, вы можете использовать PHP-код для подключения к базе данных при извлечении, вставке, обновлении или удалении записей из базы данных MySQL с использованием и без использования ajax:
<?php
$host='localhost';
$username='root';
$password='';
$dbname = "my_db";
$conn=mysqli_connect($host,$username,$password,"$dbname");
if(!$conn)
{
die('Could not Connect MySql Server:' .mysql_error());
}
?>Шаг 3 - Получить данные списка из базы данных
Отображение данных в таблице HTML.
Итак, создайте файл customers.php и добавьте в него следующий код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP Code to Fetch All Data from MySQL Database and Display in html Table</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="container mt-2">
<div class="page-header">
<h2>Customers List</h2>
</div>
<div class="row">
<div class="col-md-8">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Email</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<?php
include 'mydbCon.php';
$query = "select * from customers limit 200"; // Fetch all the data from the table customers
$result = mysqli_query($dbCon, $query);
?>
<?php if ($result->num_rows > 0) : ?>
<?php while ($array = mysqli_fetch_row($result)) : ?>
<tr>
<th scope="row"><?php echo $array[0]; ?></th>
<td><?php echo $array[1]; ?></td>
<td><?php echo $array[2]; ?></td>
<td><?php echo $array[3]; ?></td>
<td>
<a href="jаvascript:void(0)" class="btn btn-primary view" data-id="<?php echo $array[0]; ?>">View</a>
</tr>
<?php endwhile; ?>
<?php else : ?>
<tr>
<td colspan="3" rowspan="1" headers="">No Data Found</td>
</tr>
<?php endif; ?>
<?php mysqli_free_result($result); ?>
</tbody>
</table>
</div>
<div class="col-md-4">
<span id="fname"></span><br>
<span id="lname"></span><br>
<span id="email"></span><br>
</div>
</div>
</div>
<script type="text/jаvascript">
$(document).ready(function($) {
$('body').on('click', '.view', function() {
var id = $(this).data('id');
// ajax
$.ajax({
type: "POST",
url: "ajax-fetch-record.php",
dаta: {
id: id
},
dataType: 'json',
success: function(res) {
$('#fname').html(res.fname);
$('#lname').html(res.lname);
$('#email').html(res.email);
}
});
});
});
</script>
</body>
</html>Шаг 4 - Получение и отображение с использованием Ajax без перезагрузки страницы
На этом этапе извлеките данные из базы данных с помощью запроса ajax. Поэтому создайте файл ajax-fetch-record.php и отобразите данные из базы данных с помощью ajax без обновления или перезагрузки всей веб-страницы.
Итак, обновите следующий код в файле ajax-fetch-record.php:
<?php
include "mydbCon.php";
$id = $_POST['id'];
$query = "SELECT * from customers WHERE id = '" . $id . "'";
$result = mysqli_query($dbCon, $query);
$cust = mysqli_fetch_array($result);
if ($cust) {
echo json_encode($cust);
} else {
echo "Error: " . $sql . "" . mysqli_error($dbCon);
}
?>Как получить данные из базы данных на php с помощью ajax и jquery, будет выглядеть как на следующем изображении:
Вывод
Здесь вы узнали, как получать данные из таблицы MySQL в PHP с помощью jQuery ajax без перезагрузки или обновления всей веб-страницы.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.