Вывод данных из базы данных MySQL в HTML-таблицу с использованием AJAX

Рецензировано :

А. Золотухин

Категория :

Web-программирование

Поделиться :

Вот пример кода для вывода данных из базы данных MySQL в HTML-таблицу с использованием AJAX:

HTML-код (index.html):

<!DOCTYPE html>
<html>
<head>
    <title>Вывод данных из базы данных</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $.ajax({
                url: 'get_data.php', // Путь к серверному скрипту для получения данных из базы данных
                type: 'GET',
                success: function(response){
                    var data = JSON.parse(response);
                    var table = '<table>';
                    table += '<tr><th>ID</th><th>Имя</th><th>Фамилия</th></tr>';
                    for(var i=0; i<data.length; i++){
                        table += '<tr>';
                        table += '<td>' + data[i].id + '</td>';
                        table += '<td>' + data[i].first_name + '</td>';
                        table += '<td>' + data[i].last_name + '</td>';
                        table += '</tr>';
                    }
                    table += '</table>';
                    $('#data_table').html(table); // Вставляем таблицу с данными в элемент с id "data_table"
                }
            });
        });
    </script>
</head>
<body>
    <div id="data_table"></div> <!-- Здесь будет отображаться таблица с данными -->
</body>
</html>

PHP-код (get_data.php):

<?php
// Подключение к базе данных
$servername = "localhost";
$username = "ваше_имя_пользователя";
$password = "ваш_пароль";
$dbname = "имя_базы_данных";

$conn = new mysqli($servername, $username, $password, $dbname);

// Проверка соединения
if ($conn->connect_error) {
    die("Ошибка подключения к базе данных: " . $conn->connect_error);
}

// Выполнение запроса к базе данных
$sql = "SELECT id, first_name, last_name FROM users";
$result = $conn->query($sql);

$data = array();

if ($result->num_rows > 0) {
    // Преобразование результата запроса в ассоциативный массив
    while($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
}

$conn->close();

// Возвращаем данные в формате JSON
echo json_encode($data);
?>

В данном примере мы используем jQuery для выполнения AJAX-запроса к серверу. AJAX-запрос отправляется на серверный скрипт (get_data.php), который выполняет запрос к базе данных и возвращает данные в формате JSON. Затем полученные данные обрабатываются на клиентской стороне и выводятся в виде HTML-таблицы в элемент с id «data_table».

Убедитесь, что заменили «вашеимяпользователя», «вашпароль» и «имябазы_данных» на соответствующие значения для вашей базы данных MySQL.