WWW gdzie kliknę przycisk template i pobiorą się dane z api.php

Autor: chmajster 06.06.2024

Dane, które się pobiorą to temat i opis

HTML

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Strona z Pobieraniem Danych</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            text-align: center;
        }
        .content {
            margin-top: 20px;
            border: 1px solid #ddd;
            padding: 10px;
            border-radius: 5px;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border: none;
            background-color: #007BFF;
            color: white;
            border-radius: 5px;
        }
        button:hover {
            background-color: #0056b3;
        }
        select {
            padding: 10px;
            font-size: 16px;
            margin-top: 10px;
            border-radius: 5px;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>

<div class="container">
    <h1>Strona z Pobieraniem Danych</h1>
    <button id="templateBtn">Pobierz Templatki</button>
    <div id="selectContainer" style="display: none;">
        <select id="templateSelect">
            <option value="" disabled selected>Wybierz templatkę</option>
        </select>
    </div>
    <div class="content" id="content">
        <h2>Temat: <span id="temat"></span></h2>
        <p>Opis: <span id="opis"></span></p>
    </div>
</div>

<script>
    document.getElementById('templateBtn').addEventListener('click', function() {
        fetch('api.php?action=getTemplates')
            .then(response => response.json())
            .then(data => {
                const select = document.getElementById('templateSelect');
                select.innerHTML = '<option value="" disabled selected>Wybierz templatkę</option>';
                data.templates.forEach(template => {
                    const option = document.createElement('option');
                    option.value = template.id;
                    option.textContent = template.name;
                    select.appendChild(option);
                });
                document.getElementById('selectContainer').style.display = 'block';
            })
            .catch(error => console.error('Error:', error));
    });

    document.getElementById('templateSelect').addEventListener('change', function() {
        const selectedTemplate = this.value;
        fetch(`api.php?action=getTemplate&template=${selectedTemplate}`)
            .then(response => response.json())
            .then(data => {
                document.getElementById('temat').textContent = data.temat;
                document.getElementById('opis').textContent = data.opis;
            })
            .catch(error => console.error('Error:', error));
    });
</script>

</body>
</html>

PHP (api.php)

<?php
header('Content-Type: application/json');

$data = [
    'temat' => 'Przykładowy Temat',
    'opis' => 'To jest przykładowy opis, który jest pobierany z API.'
];

echo json_encode($data);
?>

<?php
header('Content-Type: application/json');

$template = isset($_GET['template']) ? $_GET['template'] : '';

$data = [];

switch ($template) {
    case 'template1':
        $data = [
            'temat' => 'Temat Templatki 1',
            'opis' => 'Opis Templatki 1'
        ];
        break;
    case 'template2':
        $data = [
            'temat' => 'Temat Templatki 2',
            'opis' => 'Opis Templatki 2'
        ];
        break;
    case 'template3':
        $data = [
            'temat' => 'Temat Templatki 3',
            'opis' => 'Opis Templatki 3'
        ];
        break;
    default:
        $data = [
            'temat' => 'Brak Templatki',
            'opis' => 'Nie wybrano templatki'
        ];
        break;
}

echo json_encode($data);
?>

<?php
header('Content-Type: application/json');

// Dane do połączenia z bazą danych
$host = 'localhost';  // Zmień na adres swojego serwera baz danych
$db   = 'mydatabase'; // Zmień na nazwę swojej bazy danych
$user = 'myuser';     // Zmień na swoją nazwę użytkownika bazy danych
$pass = 'mypassword'; // Zmień na swoje hasło do bazy danych

// Połączenie z bazą danych
$conn = new mysqli($host, $user, $pass, $db);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$action = isset($_GET['action']) ? $_GET['action'] : '';

if ($action === 'getTemplates') {
    $sql = "SELECT id, name FROM templates";
    $result = $conn->query($sql);

    $templates = [];
    while ($row = $result->fetch_assoc()) {
        $templates[] = $row;
    }
    echo json_encode(['templates' => $templates]);
} elseif ($action === 'getTemplate' && isset($_GET['template'])) {
    $templateId = $_GET['template'];
    $stmt = $conn->prepare("SELECT temat, opis FROM templates WHERE id = ?");
    $stmt->bind_param("i", $templateId);
    $stmt->execute();
    $result = $stmt->get_result();
    $template = $result->fetch_assoc();
    echo json_encode($template);
} else {
    echo json_encode(['error' => 'Nieznana akcja']);
}

$conn->close();
?>

Tagi: JavaScript

Dodaj komentarz

Anuluj pisanie odpowiedzi

Search

O Blogu

Cześć Podróżniku!

Ta strona ma nie być typowym poradnikiem w IT, Głównym jej cel to zapisanie krótkich notatek, które mogą się przydać w codziennym życiu podczas korzystania/konfiguracji różnych urządzeń np. Ustawienia DHCP na Routerze Cisco, Ustawieniu Karty sieciowej na Linuxie itp.

Buy me A coffee

[Empty]

Welcome on my blog