Выпадающий список из базы postgresql на веб странице

Question

Пытаюсь добавить на страницу выпадающий список из базы postgresql , но при попытки загрузке страницы 502 Bad Gateway nginx/1.18.0 (Ubuntu)

В логе nginx - *2024/01/13 11:03:39 [error] 3351375#3351375: 1 upstream prematurely closed connection while reading response header from upstream, client: (тут мой ip), server: livsi-games.ru, request: "GET /sql_test.html HTTP/1.1", upstream: "h>

Я проверил, скрипт php к базе подключается, результат дает в таком формате ["Green","Red"] , если просто выводить результат запроса к скрипту на веб страницу - все прекрасно выводится.

В чем сложность не могу понять.

Сам php скрипт

<?php
// Connect to PostgreSQL
$host = "localhost";
$port = "5432";
$dbname = "test_db";
$user = "login";
$password = "pass";

$db = pg_connect("host=$host port=$port dbname=$dbname user=$user password=$password");

// Query to fetch values from the database
$query = "SELECT color FROM test";
$result = pg_query($db, $query);

// Collect the colors in an array
$colors = array();
while ($row = pg_fetch_array($result)) {
    $colors[] = $row['color'];
}

// Convert the array to JSON and output it
header('Content-Type: application/json');
echo json_encode($colors);

// Close database connection
pg_close($db);
?>

Страница на которую я пытаюсь добавить выпадающий список через AJAX

<!DOCTYPE html>
<html>
<head>
    <title>Colors Dropdown</title>
    <!-- Включение jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h2>Select a color:</h2>
    <select id="colorSelect">
        <!-- Здесь будут добавлены варианты цветов -->
    </select>

    <script>
        $(document).ready(function(){
            $.ajax({
                url: 'get_colors.php',
                method: 'GET',
                dataType: 'json',
                success: function(response) {
                    response.forEach(function(color) {
                        $('#colorSelect').append('<option>' + color + '</option>');
                    });
                },
                error: function(xhr, status, error) {
                    console.log('Error occurred: ' + status);
                }
            });
        });
    </script>
</body>
</html>

Страница где по аналогии просто выводитяться значения из таблицы без каких либо сложностей

<!DOCTYPE html>
<html>
<head>
    <title>AJAX Request Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>AJAX Request Example</h1>
    <p id="responseText">Response will be displayed here</p>

    <script>
        $(document).ready(function(){
            $.ajax({
                url: 'get_colors.php', // Путь к файлу PHP на сервере
                method: 'GET', // Метод запроса
                dataType: 'json', // Указываем, что ожидаем JSON в ответе
                success: function(response) {
                    // Отображаем ответ на странице
                    response.forEach(function(color) {
                        $('#responseText').append(color + '<br>');
                    });
                },
                error: function(xhr, status, error) {
                    $('#responseText').text('Error occurred: ' + status); // В случае ошибки, отображаем сообщение об ошибке
                }
            });
        });
    </script>
</body>
</html>

БЛОГ НА HUSL

Выпадающий список из базы postgresql на веб странице

Ответы (0 шт):