DOMANDA Risultato query mysql/php senza aggiornare pagina

espanico

Utente Attivo
121
9
Salve, ho realizzato uno script dove vado a inserire, tramite un form html dei dati in un database mysql, tramite php. Fin qui tutto ok, ora vorrei che nella stessa pagina dove inserisco i dati, quindi dove risiede il form html, sotto vengono elencati i dati appena inseriti senza dover aggiornare la pagina, tipo come accade twitter,facebook etc.
Al momento riesco a inviare i dati senza abbandonare la pagina ma non a visualizzare i nuovi dati. Ecco un esempio

Index.php
PHP:
//FORM 
<form name="modulo"> 
    <p>Nome</p> 
    <p><input type="text" name="nome" id="nome"> 
    <p>Cognome</p> 
     <input type="text" name="cognome" id="cognome"> 
    <input type="button" id="bottone" value="Invia i dati"> 
</form> 

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




// SCRIPT AJAX 

<script type="text/javascript"> 
$(document).ready(function() { 

  //al click sul bottone del form 
  $("#bottone").click(function(){ 

    //associo variabili 
    var nome = $("#nome").val(); 
    var cognome = $("#cognome").val(); 

  //chiamata ajax 
    $.ajax({ 

     //imposto il tipo di invio dati  
      type: "POST", 

      //Invio i dati alla pagina php 
      url: "salva.php", 

      //Dati da salvare 
      data: "nome=" + nome + "&cognome=" + cognome, 
      dataType: "html", 

      //visualizzazione errori/ok 
      success: function(msg) 
      { 
        $("#risultato").html(msg);  
      }, 
      error: function() 
      { 
        alert("Chiamata fallita, si prega di riprovare...");  
      } 
    }); 
  }); 
}); 
</script>
salva.php
PHP:
<?php  
include("connessione_db.php"); 
include("config.php"); 
mysql_select_db("$db_name",$connessione); //seleziono il database e mi connetto  

$nome = $_POST['nome']; 
$cognome = $_POST['cognome'];  

$sql = "INSERT INTO tabella SET  
nome = '$nome', cognome = '$cognome', 
 if (@mysql_query($sql)) { echo '<p>Dati salvati correttamente</p>'; }  
else { echo '<p>Si e verificato un errore ' . mysql_error() .'</p>'; } 
?>
 

cawletto

Utente Attivo
475
25
CPU
i5 750
Hard Disk
1 TB
RAM
6 GB
Scheda Video
GXT 460 SE 1GB overclocked
Monitor
Samsung LCD 1280x1024
Alimentatore
Cooler Master Silent Pro M 600 W
Case
HP
Sistema Operativo
Windows 7-64 bit
E' molto semplice. Per farlo devi usare AJAX in quanto php da solo non può farlo dal momento che è un linguaggio server-side e, dunque, non "agisce" sul tuo pc.
Questa guida è proprio quello che fa per te: Submit A Form Without Page Refresh using jQuery | Nettuts+
Spero di esser stato utile :D
 

espanico

Utente Attivo
121
9
Ciao, il tutorial del tuo link fa gia quello che io so fare, e ho postato sopra. Il problema e visualizzare sotto a quel form i dati appena inviati, tipo come accade con i commenti dei blog o dei forum. Tipo io ho due campi nome - commento, appena una persona inserisce le informazioni e preme invio questi dati si devono subito vedere sotto senza aggiornare la pagina.
 

cawletto

Utente Attivo
475
25
CPU
i5 750
Hard Disk
1 TB
RAM
6 GB
Scheda Video
GXT 460 SE 1GB overclocked
Monitor
Samsung LCD 1280x1024
Alimentatore
Cooler Master Silent Pro M 600 W
Case
HP
Sistema Operativo
Windows 7-64 bit
Pardon, non avevo letto bene. Allora mi correggo, stavolta dovrebbe (:look:) servirti questo: Selezione Dinamica da Database con AJAX e PHP

Con l'articolo che ti ho dato prima (o il tuo metodo) inserisci le informazioni nel database e con questo estrai le informazioni dal database stampandole nella pagina! :)
 
  • Mi piace
Reactions: OpenKoob

Juggernaut

Utente Attivo
30
2
CPU
Intel Dual Core e2200 2.20Ghz
Scheda Madre
ASRock G31M-GS
Hard Disk
500 GB
RAM
2038 MB DDR2
Scheda Video
Intel G33/G31 Express Chipset Family
Scheda Audio
RealTek High Definition Audio
Monitor
Samsung SyncMaster 710 MP LCD
Alimentatore
400
Case
Schifuzz 5000
Sistema Operativo
Windows
Per visualizzare i dati appena inseriti puoi usare lo stesso metodo che usi per gli errori, ovvero

$('#risultato').html('<p>Nome: '+nome+' - Cognome: '+cognome+'</p>');
 

espanico

Utente Attivo
121
9
Pardon, non avevo letto bene. Allora mi correggo, stavolta dovrebbe (:look:) servirti questo: Selezione Dinamica da Database con AJAX e PHP

Con l'articolo che ti ho dato prima (o il tuo metodo) inserisci le informazioni nel database e con questo estrai le informazioni dal database stampandole nella pagina! :)
Grazie per i link, anche se non fanno propriamente quello che io intendevo, comunque mi sono utili, e un altro argomento che cercavo ;)
Per visualizzare i dati appena inseriti puoi usare lo stesso metodo che usi per gli errori, ovvero

$('#risultato').html('<p>Nome: '+nome+' - Cognome: '+cognome+'</p>');
In questo modo visualizzo solo i dati appena inserito o anche i vecchi già presenti nel db? Io ho fatto una prova ma non so se e il metodo giusto, qui potete vedere l'esempio online. Link

In pratica metto estraggo i dati sia nella pagina salva.php e sia nella index.php in modo che se una persona visita per la prima volta gia visualizza i vecchi dati. Mentre se ne aggiunge altri li visualizza subito senza dover aggiornare la pagina. Diciamo che il risultato finale mi soddisfa, ma vorrei sapere se e un modo professionale.

Grazie.
 

OpenKoob

Nuovo Utente
33
2
Io sono con Cawletto, attraverso una richiesta con AJAX/PHP puoi gestire in tempo reale, senza il refresh della pagina e con effetti grafici dinamici il tuo database. Anche il metodo di Juggernaut è funzionante ma macchinoso e poco amalgamabile a futuri aggiornamenti (p.e. è una rottura se successivamente vuoi aggiungere accanto ad ogni coppia nome/cognome una combobox per l'eliminazione di quel record).

EDIT: Chiedo scusa avevo letto male cosa diceva Juggernaut :muro: la scelta migliore è fare un misto: ad ogni "submit", in caso di success, (sto parlando del metodo ajax/php) fai la funzione $.html(), magari con un ciclo for per ogni coppia nome/cognome cosi strutturato:
Codice:
[COLOR=#333333]per ogni utente {    
    var tempHtml = [/COLOR][COLOR=#333333]$('#risultato').html();
[/COLOR][COLOR=#333333]    tempHtml += [/COLOR][COLOR=#333333]'<p>Nome: '+nome+' - Cognome: '+cognome+'</p>';[/COLOR][COLOR=#333333]
    $('#risultato').html(tempHtml);
}
[/COLOR]
 
Ultima modifica:

Juggernaut

Utente Attivo
30
2
CPU
Intel Dual Core e2200 2.20Ghz
Scheda Madre
ASRock G31M-GS
Hard Disk
500 GB
RAM
2038 MB DDR2
Scheda Video
Intel G33/G31 Express Chipset Family
Scheda Audio
RealTek High Definition Audio
Monitor
Samsung SyncMaster 710 MP LCD
Alimentatore
400
Case
Schifuzz 5000
Sistema Operativo
Windows
Devi creare un altra funzione del jquery che si occupi di interrogare il server PHP ogni tot tempo. Il server si occupa soltanto di rispondere con il contenuto del database.

Per evitare sprechi, puoi inserire una variabile da passare al PHP che identifica il numero dell'ultima riga ovvero:

1) L'utente apre la pagina, i JS effettua la richiesta al PHP con ULTIMA_RIGA_RICEVUTA = 0, che risponde con l'intero contenuto della tabella
2) Dopo tot tempo il JS effettua di nuova la richiesta per avere aggiornamenti, inviando come dato al database l'ULTIMA_RIGA_RICEVUTA che contiene l'id dell'ultima riga ricevuta al passo 1.
 

dr.pexquz

Utente Attivo
346
9
CPU
Intel Core 2 Duo E5200 2.5Ghz 2Mb BOX
Scheda Madre
ASROCK 775 4Core1600Twins-P35
Hard Disk
SSD Samsung MZ-7TD250BW 250GB + Hard Disk WD Green WD30EZRX 3TB
RAM
DDR2 800Mhz PC6400 4GB Kingston HyperX (2x2GB)
Scheda Video
AMD XFX Radeon HD6870
Scheda Audio
Integrata
Monitor
LG Flatron E2240T
Sistema Operativo
Windows 8 Pro + Media Center Pack
per chiamate del genere io uso sempre la funzione load per postare i dati via jQuery (che è una scorciatoia alla chiamata ajax). Supponendo che salva.php sia nella root, per fare quello che ti serve ti basta usare il codice

PHP:
$(document).ready(function() {
 $("#bottone").click(function() {
  $("#risultato").load("/salva.php", {
    "nome"   :  $("#nome").val(),
    "cognome"  :  $("#cognome").val()
  });
 });
});
 

Entra

oppure Accedi utilizzando

Hot del momento