Przesyłanie wartości zmiennych pomiędzy JavaScript a PHP

pytanie zadane 30 czerwca 2019 w JavaScript przez Ktym Nowicjusz (140 p.)

Witam,

chcę zrobić prostą grę w JS i PHP, i mam problem z wysyłaniem wartości zmiennych pomiędzy właśnie JS i PHP. Moja gra ma przez PHP pobierać wartość, np. ilość drewna z bazy danych MySQL wysyłać tą wartość do JS tam zostanie ona przetworzona i ta już przetworzona wartość zostanie przesłana znowu do PHP, który spowoduje jej update w bazie.

Dosyć sporo szukałem jak to zrobić, (bo największy problem jest przy wysłaniu wartości zmiennej z JS do PHP) i znalazłem .post() i .ajax() w bibliotece jQuery. Jednak z jakiegoś powodu nie działa mi to, pewnie coś robię źle, dlatego piszę. To jest mój kod:

<!DOCTYPE html>
<html lang="pl">
<html>
	<head>
		<meta charset="utf-8" />
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

		<script type="text/javascript">

					$.ajax({
						url: "plik.php",
						method: "POST",
						data: {zmienna: 15,  zmienna2: 30}
					});
			

		</script>
		
	</head>
	
	<body>
		<form action="plik.php">
			<input type="submit" value="aaaaaaa"/>
		</form>
		
	</body>
</html>

Na końcu dodałem formularz, żeby móc przejść do plik.php, a to właśnie on:

<?php
	$dziala = $_POST['zmienna'];
	echo $dziala;
?>

Gdzie popełniam błąd? I czy może jest jakiś lepszy sposób?

Z góry dziękuję za odpowiedzi.

1 odpowiedź

odpowiedź 30 czerwca 2019 przez xmentor Nałogowiec (49,520 p.)

Robisz request, ale później nie obsługujesz jego zakończenia, w dokumentacji możesz znaleźć jak to obsłużyć: https://api.jquery.com/jquery.ajax/

Jeżeli ma to wszystko dziać się po wysłaniu formularza, to musisz podpiąć się pod event `submit` formularza, dodać odpowiednie pola z atrybutem `name` i wtedy użyć Ajaxa.

komentarz 30 czerwca 2019 przez Ktym Nowicjusz (140 p.)
edycja 30 czerwca 2019 przez Ktym

Dziękuję, ale nie rozumiem do końca.

Jak to zrobić?

komentarz 30 czerwca 2019 przez Qwizi Obywatel (1,280 p.)


<form id="form" action="plik.php">
...

<script type="text/javascript">
document.getElementById("form").addEventListener("submit", () => {
//Ajax
})
</script>

komentarz 30 czerwca 2019 przez xmentor Nałogowiec (49,520 p.)

@Ktym, której części? Obsługi zakończenia requestu, czy zapięcie wszystkiego pod formularz?

komentarz 30 czerwca 2019 przez Ktym Nowicjusz (140 p.)

Zakończenia requestu, zapięcie już zrobiłem tylko nie wiem czy na pewno dobrze:

<!DOCTYPE html>
<html lang="pl">
<html>
	<head>
		<meta charset="utf-8" />
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

		<script type="text/javascript">
	document.getElementById("form").addEventListener("submit", () => {

					$.ajax({
						url: "plik.php",
						method: "POST",
						data: {zmienna: 2,  zmienna2: 3}
					});
				}
			

		</script>
		
	</head>
	
	<body>
		<form action="plik.php" id="form">
			<input type="submit" value="aaaaaaa"/>
		</form>
		
	</body>
</html>

komentarz 30 czerwca 2019 przez xmentor Nałogowiec (49,520 p.)

`$.ajax()` zwraca 'Promise', więc możesz użyć `.then()`, lub `.done()`, podesłałem Ci link do dokumentacji, wiec powinieneś bez problemu odszukać

komentarz 30 czerwca 2019 przez Ktym Nowicjusz (140 p.)

Czyli coś w stylu:

  .done(function( msg ) {
    alert( "Data Saved: " + msg );

I wtedy po prostu w plik.php przez $_POST['zmienna'] będę w stanie odebrać jej wartość?

komentarz 30 czerwca 2019 przez xmentor Nałogowiec (49,520 p.)

Coś w ten deseń

komentarz 30 czerwca 2019 przez Ktym Nowicjusz (140 p.)

Czyli finalnie mam tak:

<!DOCTYPE html>
<html lang="pl">
<html>
	<head>
		<meta charset="utf-8" />
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

		<script type="text/javascript">
			
				
			document.getElementById("form").addEventListener("submit", () => {
				$.ajax({
					  method: "POST",
					  url: "plik.php",
					  data: { zmienna: 15, zmienna2: 30 }
					})
					  .done(function( msg ) {
						alert( "Data Saved: " + msg );
					  });
				}
			

		</script>
		
	</head>
	
	<body>
		<form action="plik.php" id="form">
			<input type="submit" value="aaaaaaa"/>
		</form>
		
	</body>
</html>

I plik.php

<?php
	$dziala = $_POST['zmienna'];
	echo $dziala;
?>

Tyle że to nie działa niestety :-(

komentarz 30 czerwca 2019 przez xmentor Nałogowiec (49,520 p.)

Ja dostaje wartość zwrotną '15', brakuje Ci zakończenia podpięcia eventu nawiasem okrągłym:

element.addEventListener('submit', function() {
//body
});

Pamiętaj aby zablokować domyślne działanie formularza (preventDefault)

komentarz 30 czerwca 2019 przez Ktym Nowicjusz (140 p.)
edycja 30 czerwca 2019 przez Ktym

<!DOCTYPE html>
<html lang="pl">
<html>
    <head>
        <meta charset="utf-8" />
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 
        <script type="text/javascript">
             
                 
            document.getElementById("form").addEventListener("submit", () => {
                $.ajax({
                      method: "POST",
                      url: "plik.php",
                      data: { zmienna: 15, zmienna2: 30 }
                    })
                      .done(function( msg ) {
                        alert( "Data Saved: " + msg );
                      });
                });
             
 
        </script>
         
    </head>
     
    <body>
        <form action="plik.php" id="form">
            <input type="submit" value="aaaaaaa"/>
        </form>
         
    </body>
</html>

Czego teraz brakuje, bo niestety dalej nie działa :-(

Gdzie dodać to

event.preventDefault();

Bardzo dziękuję za pomoc

komentarz 30 czerwca 2019 przez xmentor Nałogowiec (49,520 p.)

W przesłanym linku jest przykład

komentarz 30 czerwca 2019 przez Ktym Nowicjusz (140 p.)
edycja 30 czerwca 2019 przez Ktym

Zrobiłem to tak:

<!DOCTYPE html>
<html lang="pl">
<html>
    <head>
        <meta charset="utf-8" />
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 
        <script type="text/javascript">
             
                 
            document.getElementById("form").addEventListener("submit", function(event) => {
				event.preventDefault();
				
                $.ajax({
                      method: "POST",
                      url: "plik.php",
                      data: { zmienna: 15, zmienna2: 30 }
                    })
                      .done(function( msg ) {
                        alert( "Data Saved: " + msg );
						
						
                      });
                });
             
 
        </script>
         
    </head>
     
    <body>
        <form action="plik.php" id="form">
            <input type="submit" value="aaaaaaa"/>
        </form>
         
    </body>
</html>

Ale dalej nie działa

komentarz 30 czerwca 2019 przez xmentor Nałogowiec (49,520 p.)

Masz konsole, sprawdź błędy, od tego ona po części jest :)

Na pewno to: ` function(event) => ` jest niepoprawne

komentarz 1 lipca 2019 przez Ktym Nowicjusz (140 p.)

Od wczoraj szukam tych błędów :-)

Usunąłem "=>" a konsola pokazuje mi ciągle taki błąd

index.html:10 Uncaught TypeError: Cannot read property 'addEventListener' of null

Dodałem jeszcze id="submit" do przycisku w formularzu.

<!DOCTYPE html>
<html lang="pl">
<html>
    <head>
        <meta charset="utf-8" />
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 
        <script type="text/javascript">
             
            document.getElementById("form").addEventListener("submit", function(event) {
				event.preventDefault();
                $.ajax({
                      method: "POST",
                      url: "plik.php",
                      data: { zmienna: 15, zmienna2: 30 }
                    })
                      .done(function( msg ) {
                        alert( "Data Saved: " + msg );
						
						
                      });
                });
             
 
        </script>
         
    </head>
     
    <body>
        <form action="plik.php" id="form">
            <input type="submit" value="aaaaaaa" id="submit"/>
        </form>
         
    </body>
</html>