Javascript - Valore di ritorno richieste di JQuery sempre undefined

27/12/16 20:45

Salve a tutti, oggi stavo cercando di realizzare una richiesta post con JQuery. Ho girato per il web, ho trovato codici di esempio da w3schools o stackoverflow eppure, una volta scritto il codice, il risultato è sempre il valore undefined. Posto il codice del file in cui ho messo anche il codice php:

<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var data = {};
	data.name="Donald Duck";
	data.city="Duckburg";
    $("button").click(function(){
        $.post("index.php",
			data,
			function(response){
				alert("Data: "+response.data+" Success: "+response.success);
			}
		);
    });
});
</script>
</head>
<body>

<button>Send an HTTP POST request to a page and get the result back</button>
<?php
	$return = array();
	if (isset($_POST['name']) && isset($_POST['city'])) {
		$return["data"] = utf8_encode("Dear ".$_POST['name'].". Hope you live well in ".$_POST['city']);
		$return["success"] = "success";
		echo json_encode($return);	
		exit();
	}
?>
</body>
</html>

Il codice php avevo provato a scriverlo io, poi ho visto un po' in giro e ho trovato una cosa come quella che c'è adesso. Ora chiedo a voi: Cosa sto sbagliando? Perché sia Data che Success hanno come risultato undefined? Perchè se metto nell'alert solo response ottengo il codice sorgente della pagina? JQuery mi sta dando un sacco di problemi. A volte ho seri dubbi sulla sua affidabilità.

aaa

27/12/16 21:19

Il problema è che stai facendo la richiesta alla stessa pagina.
Tu vuoi evidentemente che la richiesta ti ritorni un JSON, ma stai facendo la richiesta ad una pagina che contiene innanzitutto dell'HTML, al cui interno (nel body) PHP può eventualmente inserire il tuo JSON.
Separa il tutto in due files:
index.html (nota il cambio del primo argomento di $.post):

<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
        var data = {};
        data.name="Donald Duck";
        data.city="Duckburg";
    $("button").click(function(){
        $.post("ajax.php", //NOTA BENE
                        data,
                        function(response){
                                alert("Data: "+response.data+" Success: "+response.success);
                        }
                );
    });
});
</script>
</head>
<body>
 
<button>Send an HTTP POST request to a page and get the result back</button>

</body>
</html>

Quando al server viene richiesta dal browser questa pagina, la invia così com'è (non c'è nessun frammento di PHP che la rende dinamica).

ajax.php:

<?php
        $return = array();
        if (isset($_POST['name']) && isset($_POST['city'])) {
                $return["data"] = utf8_encode("Dear ".$_POST['name'].". Hope you live well in ".$_POST['city']);
                $return["success"] = "success";
                echo json_encode($return);     
                exit();
        }
?>

Questa è la parte del server che riceve i dati, rispondendo alla richiesta AJAX (lanciata con $.post), e risponde con il JSON, che viene parsato da jquery e passato come primo argomento al callback (response), senza mandare ancora dell'HTML, che non c'entra niente.

Il tuo codice non poteva funzionare perchè il server rispondeva con il json, ma all'interno dell'html; ovviamente, jquery non riesce a parsarlo, quindi ti dà come response non un'oggetto ma la stringa così com'è arrivata dal server, e per questo se la stampi viene fuori il sorgente della pagina, e se accedi a delle proprietà hai undefined (una stringa non ha alcuna proprietà data o success).

Ultima modifica effettuata da GN 27/12/16 21:24

aaa

28/12/16 16:16

tuttodiMC

Mmm quello che dici ha senso, però continua a essere undefined, anche a seguito dell'adattamento da te proposto. Possibile che deve essere così difficile fare una semplice richiesta post?

aaa

28/12/16 21:19

Hai ragione, scusa se non l'ho testato prima, ho provato adesso e ho capito cosa avevo dimenticato: di settare il tipo MIME.
Uno degli header di una risposta HTTP è Content-Type, che specifica il tipo MIME dei dati che il server sta mandando al client. Come spiegato qui api.jquery.com/jquery.post/,

The success callback function is passed the returned data, which will be an XML root element or a text string depending on the MIME type of the response. It is also passed the text status of the response.

jQuery si basa appunto sul tipo MIME della risposta per capire se response deve essere una stringa o un'oggetto ottenuto parsando JSON o XML.
Non so che Content-Type mandi uno script PHP per default, immagino text/html e probabilmente dipende dalla configurazione di Apache (o altro webserver), ma basta questa riga per settare esplicitamente il tipo di dati che stiamo inviando:

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

L'ho messa come prima riga di ajax.php ed ora a me funziona tutto.

Ultima modifica effettuata da GN 28/12/16 21:20

aaa

30/12/16 11:56

tuttodiMC

Funziona tutto grazie mille.

aaa