Salvare dati dentro input in MySQL asincronamente con Ajax

Molte volte ci troviamo davanti ad un solo campo da modificare, magari nel pannello di controllo, e dobbiamo inviare il form ad una pagina che recupera i dati, li salva nel database e avvisa l’utente dell’avvenuto salvataggio. Ogni campo viene inserito in un’unica query eccetera eccetera..

Oggi avevo da salvare due campi, i soliti ‘Termini e Condizioni’ e ‘Privacy’ ma non volevo fare le solite pagine di visualizzazione, modifica e cancellazione, così ho pensato: visto che i campi possono essere aggiornati singolarmente e sono semplice testo, come posso fare per evitare il tutto?

Bene, con jQuery, ajax e php ho escogitato un metodo multiuso: quando si clicca su un pulsante, questo richiama sull’evento onClick la funzione che prenderà il contenuto dell’input (div, text,textarea…) e lo invierà asincronamente ad una pagina specifica, la quale si occuperà di salvare i dati nel database, e una volta effettuato il salvataggio verrà visualizzato un’alert che avviserà l’utente dell’avvenuto salvataggio.

Per l’input, in questo esempio, ho optato per quello che sto affrontando ora: un area di testo e un pulsante per l’aggiornamento del campo ‘termini’ nel database.

<h3>Termini e Condizioni</h3>
<h5><textarea id="termini" style="width:550px; height:300px;"><?=$termini?></textarea></h5>
<p><input type="button" value="Salva Modifiche Termini e Condizioni" onclick="salva('termini',1,'varie')"  /></p>

Spiegata in due parole: un titolo che spiega di cosa si tratta, l’id DEVE essere uguale al nome del campo da modificare nel database, riempire l’area testo con il valore salvato nel database (che ho salvato nella variabile $termini) e un normalissimo bottone con la funzione ‘salva()’ richiamata al click.

La funzione ‘salva’ necessita di:

  1. ID dell’input dal quale prendere il testo, in questo caso ‘termini’ (n.b. stesso nome del campo da modificare nel database)
  2. ID del record da modificare (questo esempio è per l’update dei dati!) Può essere eliminato in caso di INSERT di dati.
  3. DB è il nome della tabella del database in cui aggiornare i dati (o inserire o via discorrendo)

Ecco la funzione (ricordatevi di includere la libreria jQuery, magari da Google..):

<script type="text/javascript">
function salva(id_box,id,db){
	 var contenuto=$('#'+id_box).val();
     $.ajax({
          type: "POST",
          url: "strumenti.php?action=modifica_asincrona",
          data: "id="+ id +"&db=" + db +"&contenuto=" + contenuto +"&campo=" + id_box,
          success: function(msg){
               alert( "Modifiche a: "+id_box+" effettuate correttamente" );
          }
     });
}
</script>

So che ognuno ha un modo differente di fare le cose. Il mio è quello di creare una pagina ‘strumenti.php’ contenente tutte le funzioni principali, ed è un metodo perfetto per le chiamate asincrone. Per eseguire del codice chiamando un’azione, ho settato in GET una variabile: ‘action’ che, se settata, esegue la funzione relativa. In questo caso la ‘modifica_asincrona’.

Ecco il codice della pagina strumenti.php:

if(isset($_REQUEST['action'])){
	//salvataggio delle modifiche dei singoli campi nel database
        if($_REQUEST['action']=='modifica_asincrona'){
		$db=$_REQUEST['db'];
		$campo=$_REQUEST['campo'];
		$contenuto=$_REQUEST['contenuto'];
		$id=$_REQUEST['id'];
                //Questa è una query di update contenuta in New-Framework ma potete sostituirla con una normale query UPDATE
		$Ndb->update($db,$campo.',,'.$contenuto,'id='.$id);
		echo $contenuto;
	}
}

Tutto questo per cosa? Per evitare di scrivere per ogni campo da aggiornare una funzione dedicata ma avere una funzione generica che salvi le modifiche a qualsiasi campo vogliamo.

Basterà modificare il richiamo alla funzione salva per le nostre esigenze:

//salva il contenuto del campo con id 'termini' nel campo 'termini' della tabella 'varie' dove l'id è 1
salva('termini',1,'varie')
//salva il contenuto del campo con id 'privacy' nel campo 'privacy' della tabella 'varie' dove l'id è 1
salva('privacy',1,'varie')

e potete andare avanti per qualsiasi campo (purché sia un campo contenente un valore che jQuery possa recuperare con la funzione .val() ).

Ricordo che serve modificare la funzione ‘salva’ e il file php se il vostro obiettivo è quello di cancellare o inserire record nel database!!

Ha dei limiti questo sistema, però è funzionale e funzionante, per lo più per gli utilizzi più semplici, ma sono sicuro che anche per quelli più impegnativi, se aggiustato a dovere, può fare il suo degno lavoro!


Annunci

, , , , , , , , , , , ,

  1. Lascia un commento

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: