[joint77Partecipante]

Ciao, sono ancora qui. Ho provato a scrivere un semplice script per passare delle variabili ad una pagina php e da quella visualizzarle nell pagina principale:

<form name="modulo">
    <p>Nome</p>
    <p><input type="text" name="nome" id="nome"></p>
    <p>Cognome</p>
    <p><input type="text" name="cognome" id="cognome"></p>
    <input type="button" id="bottone" value="Invia i dati">
</form>
<div id="risultato"></div>
<script type="text/javascript">
$(document).ready(function() {
  $("#bottone").click(function(){
    var nome = $("#nome").val();
    var cognome = $("#cognome").val();
    $.ajax({
      type: "POST",
      url: "dati.php",
      data: "nome=" + nome + "&cognome=" + cognome,
      dataType: "html",
      success: function(msg)
      {
        $("#risultato").html(msg);
      },
      error: function()
      {
        alert("Chiamata fallita, si prega di riprovare...");
      }
    });
  });
});
</script>
</body>

<?PHP
    $nome = $_POST["nome"];
    $cognome = $_POST["cognome"];
    if ($nome == "" || $cognome == "")
    {
        echo "Inserire nome e cognome!";
    }
    else
    {
        echo $nome . " " . $cognome;
    }
?>

Fin qui tutto bene, lo script funziona, la mia domanda è se per assurdo (in quanto non è questo il caso) dalla chiamata dovessero uscire delle variabili che volessi utilizzare separatamente all’interno della pagina principale come dovrei fare?

Ho letto di passaggio di variabili jSon tramite array ma onestamente non ho trovato un tutorial che le spieghi in modo chiaro.

Sapreste aiutarmi?

Come sempre grazie anticipatamente 😀

[joint77Partecipante]

Nessuno 🙁 ?

Anche un tutorial spiegato in modo semplice please…

[jqueryitaliaAmministratore]

Eccomi qui!!! 😀

Per utilizzare il formato JSON, per prima cosa dovrai modificare la chiamata ajax con dataType = ‘Json’.

Supponiamo poi che il tuo file dati.php invece di ritornarti una stringa html, ti ritorni un array di valori (ad esempio recuperati dopo una query da DB), come ad esempio:

$userData = array();
$result = mysql_query("SELECT name, surname, address FROM myTable");

while ($row = mysql_fetch_array($result, MYSQL_NUM)) {
	$userData[] = array(
		"nome"		=> $row["name"],
		"cognome" 	=> $row["surname"],
		"indirizzo" => $row["address"]
	);
}

echo json_encode($userData);

Ovviamente prima di ritornarli, bisognerà convertirli in formato JSON con il comando php json_encode.

A questo punto sarà ritornato alla chiamata ajax un array JSON, di cui dovremmo fare il parse: ma come lo facciamo??? Andremo a modificare il success, in questo modo:

success: function( data ) {
	var returnData = '';

	if ( data.length > 0 ) {
		var i = 0;
		returnData += '<ul>'; 
                for ( i = 0; i &lt; data.length; i++) { 
                     returnData += '<li>'+ data[i].nome +' '+ data[i].cognome +' '+ data[i].indirizzo +'</li>';
                } 
                returnData += '</ul>'; 
        } else { 
            returnData += 'Nessun risultato trovato.'; 
        } 
        $( "#risultato" ).html( returnData ); 
}

A questo punto sarà restituita nel div risultato una lista di utenti.

Sufficiente come tutorial? 😛

[joint77Partecipante]

Grande grazie 🙂 più tardi lo provo, come mai hai usato un elenco puntato è per creare l’array jSon?

Posso utilizzare una formula del tipo returnData.data[0] returnData.cognome[0] returnData.indirizzo[0]  per inserire gli elementi in oggetti jQuery differenti?

 

Grazie ancora sei sempre disponibilissimo 🙂

 

[joint77Partecipante]

Ciao, non riesco a far funzionare il tuo script.

Per facilitare le cose l’ho riscritto senza uso del mySql e passando in uscita 2 costanti all’interno dell’array.
Ti riposto il codice se riesci a capire dove sbaglio:

<form name="modulo">
    <p>Nome</p>
    <p><input type="text" name="nome" id="nome"></p>
    <p>Cognome</p>
    <p><input type="text" name="cognome" id="cognome"></p>
    <input type="button" id="bottone" value="Invia i dati">
</form>

<div id="risultato"></div>

$(document).ready(function() {
  $("#bottone").click(function(){
    var nome = $("#nome").val();
    var cognome = $("#cognome").val();
    $.ajax({
      type: "POST",
      url: "dati.php",
      data: "nome=" + nome + "&cognome=" + cognome,
      dataType: "html",
success: function( data ) {
    var returnData = '';
    if ( data.length > 0 ) {
        var i = 0;
        returnData += '<ul>';
                for ( i = 0; i < data.length; i++) {
                     returnData += '<li>'+ data[i].nome +' '+ data[i].cognome +'</li>';
                }
                returnData += '</ul>';
        } else {
            returnData += 'Nessun risultato trovato.';
        }
        $( "#risultato" ).html( returnData );
}
    });
  });
});

E questa è la pagina dati.php

<?
$nome = $_POST["nome"];
$cognome = $_POST["cognome"];
$userData = array(
            "nome" => "CICCIO",
            "cognome" => "PASTICCIO"
            );
echo json_encode($userData);
?>

Una prova del risultato la trovi QUI

Grazie mille ancora 🙂

[jqueryitaliaAmministratore]

Allora:

• non ho usato un elenco puntato per creare l’array JSON, ho usato l’elenco puntato per visualizzare il risultato.
• il tuo script non funziona semplicemente perchè nel mio mini tutorial io ritorno una array multidimensionale con più valori all’interno, tu invece ritorni un array normale. Modifica nella pagina dati.php:

  $userdata = array ( ...

  con

  $userdata[] = array ( ...

  e vedrai che funzionerà tutto regolarmente 😉

[joint77Partecipante]

Ciao, niente non funziona neppure così 🙁

[jqueryitaliaAmministratore]

Sei sicuro che il file dati.php sia corretto?
Perché nella pagina di esempio che hai postato il risultato ritornato da dati.php è “null” e inoltre il dataType è impostato su “html” e non su “json” 😉

[joint77Partecipante]

Ciao e grazie, guarda il codice l’ho ristretto ai minimi termini perchè vorrei solo capire il ritorno di dati 🙂

Te li posto qui sotto:

jQuery e chiama ajax

<script type="text/javascript">
$(document).ready(function() {
  $("#bottone").click(function(){
    var nome = $("#nome").val();
    var cognome = $("#cognome").val();
    $.ajax({
      type: "POST",
      url: "dati.php",
      data: "nome=" + nome + "&cognome=" + cognome,
      dataType: "html",
success: function( data ) {
    var returnData = '';
    if ( data.length > 0 ) {
        var i = 0;
        returnData += '<ul>';
                for ( i = 0; i < data.length; i++) {
                     returnData += '<li>'+ data[i].nome +' '+ data[i].cognome +'</li>';
                }
                returnData += '</ul>';
        } else {
            returnData += 'Nessun risultato trovato.';
        }
        $( "#risultato" ).html( returnData );
}
    });
  });
});
</script>

dati.php

<?
$nome = $_POST["nome"];
$cognome = $_POST["cognome"];
$userdata[] = array(
            "nome" => 345435,
            "cognome" => 111111
            );
echo json_encode($userData);
?>

Help me please…

[joint77Partecipante]

Risolto:

<?
$nome = $_POST["nome"];
$cognome = $_POST["cognome"];
$array = array(    'prova' => $nome,    'valore' => $cognome);
echo json_encode($array);  
?>

$(document).ready(function() {
  $("#bottone").click(function(){
	var nome = $("#nome").val();
    var cognome = $("#cognome").val();
    $.ajax({
      type: "POST",
      url: "dati.php",
      data: "nome=" + nome + "&cognome=" + cognome,
      dataType: "html",
success: function(data){
                data = jQuery.parseJSON(data);
                $('#risultato').html("Il nome è: "+data.prova+"<br> Il cognome è: "+data.valore);
            }
    });
  });
});

Grazie 🙂

[Autore]

Post