Jeśli kiedykolwiek próbowałeś połączyć JavaScript i PHP, pewnie zauważyłeś, że to nie zawsze jest takie oczywiste. JavaScript działa po stronie przeglądarki (front-end), a PHP – po stronie serwera (back-end). Mimo że oba języki mają swoje mocne strony, współpraca między nimi wymaga pewnego „mostu” – sposobu na przesyłanie danych z jednego świata do drugiego.
W tym artykule pokażę Ci różne sposoby przesyłania danych z JavaScript do PHP – od prostych metod po bardziej zaawansowane. Omówimy też, jak możesz to wykorzystać w praktyce – np. przy wysyłaniu formularzy, zapisywaniu danych w bazie czy komunikacji AJAX-owej. Wszystko w prosty i zrozumiały sposób, krok po kroku.
Dlaczego w ogóle przesyłać dane z JavaScript do PHP?
JavaScript to język, który „żyje” w przeglądarce użytkownika. Dzięki niemu możesz dynamicznie zmieniać zawartość strony, reagować na kliknięcia, pobierać dane z API i wiele więcej. Ale jeśli chcesz np. zachować dane na serwerze, zapisać coś w bazie danych, wysłać e-maila albo przetworzyć formularz — potrzebujesz do tego PHP.
I właśnie dlatego musimy przesłać dane z przeglądarki (JavaScript) do serwera (PHP). Typowe sytuacje to:
- użytkownik wypełnia formularz i chcesz wysłać dane bez przeładowania strony,
- chcesz pobrać wynik działania jakiegoś skryptu PHP (np. ceny produktu),
- chcesz zapisać dane do bazy po kliknięciu przycisku.
Tradycyjne przesyłanie danych przez formularz (metoda POST lub GET)
Najprostszy sposób, który istnieje od dawna, to po prostu formularz HTML. JavaScript może uzupełnić dane w formularzu, a PHP odbierze je po wysłaniu.
Przykład:
<form id="myForm" action="odbierz.php" method="POST">
<input type="hidden" name="username" id="username">
<button type="submit">Wyślij dane</button>
</form>
<script>
// Załóżmy, że pobieramy dane dynamicznie w JS
const userName = "Jan Kowalski";
document.getElementById('username').value = userName;
</script>
A w pliku odbierz.php:
<?php
if (isset($_POST['username'])) {
$name = $_POST['username'];
echo "Otrzymano imię: " . htmlspecialchars($name);
}
?>
Ten sposób jest najprostszy, ale ma jedną wadę – przeładowuje stronę po wysłaniu formularza. Dlatego w nowoczesnych aplikacjach częściej korzysta się z AJAX.
Przesyłanie danych z JavaScript do PHP przez AJAX (metoda fetch)
AJAX (Asynchronous JavaScript and XML) to sposób na komunikację z serwerem bez przeładowania strony.
Zamiast klasycznego formularza, możesz wysłać dane „w tle” i odebrać odpowiedź od PHP.
To właśnie ta metoda jest dziś najczęściej używana w nowoczesnych aplikacjach webowych.
Przykład – wysyłanie danych do PHP przez fetch():
<button id="sendBtn">Wyślij dane</button>
<script>
document.getElementById('sendBtn').addEventListener('click', () => {
const dane = {
imie: "Kasia",
wiek: 28
};
fetch('odbierz.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(dane)
})
.then(response => response.text())
.then(result => {
console.log("Odpowiedź z PHP:", result);
})
.catch(error => console.error("Błąd:", error));
});
</script>
A w pliku odbierz.php:
<?php
// Odczyt danych JSON z ciała żądania
$daneJSON = file_get_contents("php://input");
$dane = json_decode($daneJSON, true);
if ($dane) {
$imie = $dane['imie'];
$wiek = $dane['wiek'];
echo "Otrzymano dane: $imie, lat $wiek.";
} else {
echo "Nie otrzymano danych.";
}
?>
Widzisz?
JavaScript wysyła dane jako JSON, a PHP je odbiera, dekoduje i może je dalej przetwarzać – np. zapisać do bazy danych.
Wysyłanie danych przez XMLHttpRequest
Zanim fetch() stał się popularny, używano starszego obiektu XMLHttpRequest.
Działa bardzo podobnie, ale wymaga trochę więcej kodu.
Przykład:
<script>
const xhr = new XMLHttpRequest();
xhr.open("POST", "odbierz.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log("Odpowiedź z PHP:", xhr.responseText);
}
};
const dane = "imie=Ania&wiek=25";
xhr.send(dane);
</script>
PHP:
<?php $imie = $_POST['imie'] ?? ''; $wiek = $_POST['wiek'] ?? ''; echo "Otrzymano: $imie ($wiek lat)"; ?>
Ten sposób nadal działa, ale dziś raczej wybieramy fetch() – jest prostszy i bardziej nowoczesny.
Przesyłanie danych przez URL (GET)
Jeśli dane nie są poufne (np. numer strony, filtr wyszukiwania itp.), możesz wysłać je w parametrach URL.
Przykład:
const imie = "Marek";
fetch("odbierz.php?imie=" + encodeURIComponent(imie))
.then(res => res.text())
.then(data => console.log(data));
PHP:
<?php
if (isset($_GET['imie'])) {
echo "Cześć, " . htmlspecialchars($_GET['imie']);
}
?>
Taka metoda jest szybka, ale nie nadaje się do przesyłania poufnych danych (np. haseł).
Jak odebrać dane JSON w PHP?
Częsty problem początkujących – wysyłają dane jako JSON, ale PHP ich „nie widzi”.
Dzieje się tak, bo PHP domyślnie nie przetwarza treści JSON z php://input.
Musisz sam to zrobić, np. tak:
$dane = json_decode(file_get_contents('php://input'), true);
To linijka, która zadziała w każdym przypadku, gdy dane są przesyłane metodą POST jako JSON.
Co zrobić z danymi po stronie PHP?
Okej, dane już mamy. Co dalej?
PHP może teraz zrobić wszystko:
- zapisać dane w bazie MySQL,
- wysłać e-maila,
- zwrócić wynik do JavaScriptu.
Przykład – zapis do bazy MySQL (PDO):
<?php
$dane = json_decode(file_get_contents('php://input'), true);
if ($dane) {
$pdo = new PDO("mysql:host=localhost;dbname=test", "root", "");
$stmt = $pdo->prepare("INSERT INTO users (imie, wiek) VALUES (:imie, :wiek)");
$stmt->execute([
':imie' => $dane['imie'],
':wiek' => $dane['wiek']
]);
echo "Zapisano użytkownika: " . $dane['imie'];
}
?>
Odbieranie odpowiedzi w JavaScript
Często nie chodzi tylko o wysłanie danych, ale też o odbiór odpowiedzi od PHP.
Wystarczy zwrócić coś z PHP (np. tekst lub JSON), a JS może to odczytać.
Przykład – PHP zwraca JSON:
<?php $dane = ["status" => "OK", "wiadomosc" => "Dane zapisane pomyślnie!"]; echo json_encode($dane); ?>
JavaScript:
fetch("odbierz.php", { method: "POST" })
.then(res => res.json())
.then(data => console.log(data.wiadomosc));
Dzięki temu możesz tworzyć naprawdę interaktywne aplikacje webowe.
Bezpieczeństwo – na co uważać?
Wysyłanie danych z JavaScript do PHP to fajna sprawa, ale pamiętaj o bezpieczeństwie.
Kilka zasad:
- Nigdy nie ufaj danym z JavaScriptu – mogą być łatwo zmienione przez użytkownika.
Zawsze waliduj je po stronie serwera (PHP). - Używaj
htmlspecialchars()przy wyświetlaniu danych, żeby uniknąć ataków XSS. - Używaj tokenów CSRF, jeśli obsługujesz formularze lub akcje wymagające autoryzacji.
- Nie przesyłaj haseł jawnie przez GET – zawsze używaj HTTPS i POST.
Bonus: Wysyłanie plików z JavaScript do PHP
Czasami chcesz wysłać nie tylko dane tekstowe, ale też plik (np. zdjęcie).
Do tego służy obiekt FormData.
JavaScript:
const plik = document.querySelector('#plik').files[0];
const formData = new FormData();
formData.append('plik', plik);
formData.append('opis', 'Moje zdjęcie');
fetch('upload.php', {
method: 'POST',
body: formData
})
.then(res => res.text())
.then(data => console.log(data));
PHP (upload.php):
<?php
if (isset($_FILES['plik'])) {
$target = "uploads/" . basename($_FILES['plik']['name']);
if (move_uploaded_file($_FILES['plik']['tmp_name'], $target)) {
echo "Plik został zapisany jako: " . htmlspecialchars($target);
} else {
echo "Błąd przy zapisie pliku!";
}
}
?>
Proste, prawda?
Dzięki FormData możesz wysyłać pliki razem z innymi danymi, bez żadnych bibliotek
Jak widzisz, przesyłanie danych z JavaScript do PHP to nic trudnego – wystarczy zrozumieć, że oba języki działają po różnych stronach:
- JavaScript działa w przeglądarce (klient),
- PHP działa na serwerze.
Dane można przesłać na wiele sposobów:
- przez formularz (POST, GET),
- przez AJAX (
fetch()lubXMLHttpRequest), - przez URL (dla prostych zapytań),
- przez
FormData(dla plików), - w formacie JSON (dla nowoczesnych API).
Najczęściej używaną i najwygodniejszą metodą jest dziś AJAX z fetch() – pozwala tworzyć interaktywne aplikacje bez przeładowania strony, a PHP może elastycznie przetwarzać dane po swojej stronie.