Questo sito utilizza cookies solo per scopi di autenticazione sul sito e nient'altro. Nessuna informazione personale viene tracciata. Leggi l'informativa sui cookies.
Username: Password: oppure
Javascript - Valore di ritorno richieste di JQuery sempre undefined
Forum - Javascript - Valore di ritorno richieste di JQuery sempre undefined

Avatar
tuttodiMC (Normal User)
Expert


Messaggi: 327
Iscritto: 29/10/2012

Segnala al moderatore
Postato alle 21:45
Martedì, 27/12/2016
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:

Codice sorgente - presumibilmente Delphi

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="jquery-3.1.1.js"></script>
  5. <script type="text/javascript">
  6. $(document).ready(function(){
  7.         var data = {};
  8.         data.name="Donald Duck";
  9.         data.city="Duckburg";
  10.     $("button").click(function(){
  11.         $.post("index.php",
  12.                         data,
  13.                         function(response){
  14.                                 alert("Data: "+response.data+" Success: "+response.success);
  15.                         }
  16.                 );
  17.     });
  18. });
  19. </script>
  20. </head>
  21. <body>
  22.  
  23. <button>Send an HTTP POST request to a page and get the result back</button>
  24. <?php
  25.         $return = array();
  26.         if (isset($_POST['name']) && isset($_POST['city'])) {
  27.                 $return["data"] = utf8_encode("Dear ".$_POST['name'].". Hope you live well in ".$_POST['city']);
  28.                 $return["success"] = "success";
  29.                 echo json_encode($return);     
  30.                 exit();
  31.         }
  32. ?>
  33. </body>
  34. </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à.

PM Quote
Avatar
GN (Member)
Guru


Messaggi: 772
Iscritto: 30/04/2011

Segnala al moderatore
Postato alle 22:19
Martedì, 27/12/2016
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):
Codice sorgente - presumibilmente Javascript

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="jquery-3.1.1.js"></script>
  5. <script type="text/javascript">
  6. $(document).ready(function(){
  7.         var data = {};
  8.         data.name="Donald Duck";
  9.         data.city="Duckburg";
  10.     $("button").click(function(){
  11.         $.post("ajax.php", //NOTA BENE
  12.                         data,
  13.                         function(response){
  14.                                 alert("Data: "+response.data+" Success: "+response.success);
  15.                         }
  16.                 );
  17.     });
  18. });
  19. </script>
  20. </head>
  21. <body>
  22.  
  23. <button>Send an HTTP POST request to a page and get the result back</button>
  24.  
  25. </body>
  26. </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:
Codice sorgente - presumibilmente Javascript

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


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 il 27/12/2016 alle 22:24
PM Quote
Avatar
tuttodiMC (Normal User)
Expert


Messaggi: 327
Iscritto: 29/10/2012

Segnala al moderatore
Postato alle 17:16
Mercoledì, 28/12/2016
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?

PM Quote
Avatar
GN (Member)
Guru


Messaggi: 772
Iscritto: 30/04/2011

Segnala al moderatore
Postato alle 22:19
Mercoledì, 28/12/2016
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 https://api.jquery.com/jquery.post/,
Testo quotato

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:
Codice sorgente - presumibilmente Plain Text

  1. 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 il 28/12/2016 alle 22:20
PM Quote
Avatar
tuttodiMC (Normal User)
Expert


Messaggi: 327
Iscritto: 29/10/2012

Segnala al moderatore
Postato alle 12:56
Venerdì, 30/12/2016
Funziona tutto grazie mille.

PM Quote