Zmienna JS do PHP

pytanie zadane 3 października 2023 w JavaScript przez Cypika Początkujący (290 p.)
zamknięte 4 października 2023 przez Cypika

Dzień dobry, mam problem z przesyłaniem zmiennych z JS do PHP, dokładniej to chcę przesłać zmienną "pkt" (z JS) do PHP, po to by zapisać tą wartość w bazie danych. Doszukałem się, że trzeba zrobić to metodą AJAX, tylko że próbowałem różnych rozwiązań i nie chce działać jak powinno. Poniżej umieszczam kod (bez fragmentu z AJAX'em, bo już za bardzo pokopałem )

<?php
    session_start();

    if(!isset($_SESSION['zalogowany'])){
        header('Location: index.php');
    }
?>

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <?php

        echo "<p>Witaj ".$_SESSION['user'].'! [<a href="logout.php">Wyloguj się</a>]</p>';
        echo "<p><b>Punkty</b>: ".$_SESSION['pkt'];
        echo "| <b>booster</b>: x".$_SESSION['boost']."</p>";
    
    ?>
    <br><br><br>

    <p id="lcd_pkt"></p>
    <p id="lcd_boost"></p>
    <br><br>

    <br><br><br><br>

    <button onclick="zapis()">Zapis</button>
    <br><br>
    <button onclick="clickacz()" style="width: 100px; height: 100px;">click!</button>

    <script type="text/javascript">
        var pkt = <?php echo $_SESSION['pkt']?>; 
        var boost = "<?php echo $_SESSION['boost'];?>"; 
        document.getElementById("lcd_pkt").innerHTML = "Twoje punkty: " + pkt;
        document.getElementById("lcd_boost").innerHTML = "Twój booster: x" + boost;

        function clickacz(){
            pkt++;
            document.getElementById("lcd_pkt").innerHTML = "Twoje punkty: " + pkt;
        }

        function zapis(){
            /*Tu miał być AJAX*/
 
        } 

    </script>

</body>
</html>

Z góry dziękuję za wszystkie odpowiedzi.

komentarz zamknięcia: Rozwiązanie

3 odpowiedzi

odpowiedź 4 października 2023 przez VBService Ekspert (256,600 p.)
wybrane 4 października 2023 przez Cypika

Najlepsza

Skoro podczepiasz jquery

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

to może go użyj i m. in. masz też dostęp do jQuery.ajax()

Przykład w oparci o Twój kod

<?php
    session_start();

    if (! isset($_SESSION['zalogowany'])) {
        header('Location: index.php');
    } else {
        $_SESSION['pkt'] = $_SESSION['pkt'] ?? 0;
        $_SESSION['boost'] = $_SESSION['boost'] ?? 1;
    }
?>

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Klikacz</title>

        <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

        <style>
            html,
            body {
                padding: 0;
                margin: 1rem;
            }
            .scoreboard {
                font-weight: bold;
                margin-bottom: 4rem; /* zamiast <br>-ów w kodzie html */
            }
            .scoreboard span {
                display: inline-block;
                font-weight: normal;
                width: 2rem;
                margin-left: .15rem;
            }
            button {
                display: block;
                width: 8rem;
                border-radius: .25rem;
                cursor: pointer;
            }
            button + button {
                margin-top: 2rem;
            }
            button.save {
                border-color: green;
            }
            button.clicker {
                aspect-ratio: 1;
            }
        </style>
    </head>
    <body>
        <p>
            Witaj <?=$_SESSION['user']?>! [<a href="logout.php">Wyloguj się</a>]
        </p>
        <p class="scoreboard">
            Punkty: <span id="lcd_pkt"></span>
            Booster: x<span id="lcd_boost"></span>
        </p>

        <button class="save" onclick="savePoints()">Zapisz</button>
        <button class="clicker" onclick="clicker()">Click!</button>

        <script>
            let pkt = <?=$_SESSION['pkt']?>;
            let boost = <?=$_SESSION['boost']?>;

            window.onload = load;

            function load() {
                $('#lcd_pkt').text(pkt);
                $('#lcd_boost').text(boost);
            }

            function clicker() {
                pkt += 1 * boost;
                $('#lcd_pkt').text(pkt);
            }

            function savePoints() {
                $.ajax({
                    url: 'save_score.php',
                    method: 'POST',
                    data: {
                        points: pkt,
                        boost: boost
                    },
                    beforeSend: function(xhr) {
                        $('.save').prop('disabled', true);
                    },
                    success: function(response) {
                        console.log('Odpowiedź serwera:', response);
                    },
                    error: function(xhr, status, error) {
                        console.error('Błąd: ' + status, error);
                    },
                    complete: function() {
                        $('.save').prop('disabled', false);
                    }
                });
            }
        </script>
    </body>
</html>

przykładowy save_score.php

<?php
    session_start();

    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        if (isset($_SESSION['zalogowany'])) {
            $points = $_POST['points'] ?? null;
            $boost = $_POST['boost'] ?? null;

            if (is_numeric($points) && is_numeric($boost)) {
            // ... kod połączenia z bazą danych
            // ... wykonanie sql ... itd.
            // $_SESSION['pkt'] = $points;
            // $_SESSION['boost'] = $boost;

                echo 'Dane zostały zapisane';
            } else {
                echo 'Wystąpił problem podczas zapisu!';
            }
        }
    }
?>

możesz też z jquery użyć jQuery.post()

            function savePoints() {
                $('button.save').prop('disabled', true);
                $.post('save_score.php', { // method: 'POST'
                    points: pkt,
                    boost: boost
                })
                .done(function(response) {
                    console.log('Odpowiedź serwera:', response);
                })
                .fail(function(xhr, status, error) {
                    console.error('Błąd: ' + status, error);
                })
                .always(function() {
                    $('button.save').prop('disabled', false);
                });
            }

1	komentarz 4 października 2023 przez Cypika Początkujący (290 p.) Działa, dzięki!

odpowiedź 3 października 2023 przez andrew.guzowski Użytkownik (600 p.)

Cześć. Polecam zajrzeć na stronkę, która bardzo fajnie to pokazuje.

Poniżej coś na kształt Ajax, którego potrzebujesz. Nie testowałem, bo „na kolanie” piszę

const ob = {
    punkt: pkt // w php będzie dostępny klucz w tablicy $_POST / $_REQUEST
}

// zdefiniuj URL, który będzie odbierał dane
fetch('http://localhost/endpoint, {
        method: "post",
        headers: new Headers([
            'Content-Type’, 'application/json'
        ]),
        body: JSON.stringify(ob)
    })
    .then(res => res.json()) // response zwracany przez php
    .then(res => {
        console.log("Zapisałem punkty w bazie");
        console.log(res);
    })

odpowiedź 4 października 2023 przez Visual Studio Kot Bywalec (2,550 p.)

Używasz jQuery, więc możesz go wykorzystać. Zdefiniuj funkcję AJAX, która wyśle zmienną pkt do PHP, przykład

function zapis() {
    var pkt = <?php echo $_SESSION['pkt'];?>; // Pobierz aktualną wartość punktów
    $.ajax({
        type: 'POST', // Metoda HTTP
        url: 'zapisz_pkt.php', // Plik PHP, który będzie przetwarzał zapytanie
        data: { pkt: pkt }, // Dane do przesłania (pkt)
        success: function(response) {
            // Tutaj możesz obsłużyć odpowiedź od PHP, jeśli potrzebujesz
            console.log(response);
        },
        error: function(xhr, status, error) {
            // Obsłuż błąd, jeśli wystąpi
            console.error(xhr.responseText);
        }
    });
}

Teraz tylko musisz stworzyć plik PHP (zapisz_pkt.php), który obsłuży zapytanie AJAX i zapisze wartość pkt w bazie danych.

<?php
session_start();
if (!isset($_SESSION['zalogowany'])) {
    // Obsłuż przypadek, gdy użytkownik nie jest zalogowany
    echo "Użytkownik niezalogowany.";
    exit;
}

if (isset($_POST['pkt'])) {
    $pkt = $_POST['pkt'];

    // Tutaj możesz zapisać wartość $pkt w bazie danych
    // Przykład:
    // $db = new mysqli('host', 'username', 'password', 'database_name');
    // $query = "UPDATE tabela SET punkty = $pkt WHERE id = {$_SESSION['user_id']}";
    // $result = $db->query($query);

    // Jeśli operacja zapisu zakończy się sukcesem, możesz zwrócić odpowiedź
    // echo "Punkty zapisane pomyślnie.";
} else {
    echo "Brak przesłanych danych.";
}
?>

Mam nadzieję, że pomogło