Tutorial jQuery ajax – Leggere dati ed elaborarli

Scritto Aggiornato il Di Giacomo

Nel tutorial jQuery ajax di oggi vediamo come leggere dati ed elaborarli al fine di rendere le nostre applicazioni sempre più user friendly.

Molto spesso vedo chiamate ajax dove i dati vengono letti in modo inefficiente o con falle che potrebbero compromettere la sicurezza del sito , per questo in questa guida vi mostrerò uno dei modi migliori (secondo me) per agire con questo tipo di dati.

[button link=”http://www.targetweb.it/tutorial/2014/tutorial-ajax/” color=”blue” target=”blank” size=”large”]Demo[/button]

Questa guida parte con il presupposto che voi sappiate già usare jquery e la funzione ajax. In caso contrario vi consiglio di leggere queste guide:

[button link=”http://www.targetweb.it/select-concatenate-php-con-jquery-ajax/” color=”blue” target=”blank” size=”large”]Select Concatenate Ajax/PHP[/button] [button link=”http://www.targetweb.it/uso-di-jquery-serialize-passare-dati-di-un-form-via-ajax/” color=”blue” target=”blank” size=”large”]jQuery Serialize[/button]

Creiamo la nostra pagina

Per prima cosa creiamo una pagina html contenente un semplice form grazie al quale andremo a fare la nostra richiesta ajax

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html" charset=utf-8 />
		<title>Guida</title>
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
	</head>
	<body>
		<div id="container">
			<div id="result">Inserisci la password</div>
			<div id="input">
				<form method="post" action="javascript:void(0)" id="tutform">
					<input type="password" value="" placeholder="Password..." name="password"/>
					<input type="submit" value="Invia" />
				</form>
			</div>
		</div>
	</body>
</html>

Come potete vedere non è nulla di complicato, abbiamo semplicemente creato una pagina contenente un form con un input di tipo password, l’azione del form sarà nulla, quindi non dobbiamo preoccuparci di prevenirne l’esecuzione tramite javascript/jquery.

Diamo uno stile alla pagina

* {
	margin: 0;
	padding: 0;
}

#container {
	width: 300px;
	margin: 20px auto;
}

#input {
	width: 300px;
	margin-bottom: 10px;
	float: left;
}

#result {
	width: 290px;
	font-family: arial;
	color: #7d7d7d;
	padding: 0px 5px;
	margin-bottom: 10px;
	float: left;
}

.dati {
	width: 288px;
	height: 30px;
	line-height: 30px;
	padding: 0px 5px;
	border: 1px solid #b0b0b0;
	color: #7d7d7d;
	font-size: 16px;
	float: left;
}

input {
	width: 300px;
	height: 30px;
	padding: 0px 5px;
	border: 1px solid #b0b0b0;
}

input[type='submit'] {
	width: 100px;
	height: 30px;
	background: #f5f5f5;
	margin-top: 5px;
	float: right;
}

Creiamo la pagina che andremo a caricare tramite ajax

1action.php

foreach($_POST as $key => $val) {
	${$key} = htmlentities($val); //creiamo le variabili prendendo i valori e i nomi degli indici dell'array post
}
$return = array( //questo array conterrà tutte le informazioni che la funzione ajax riceverà
	"messaggio" => "", //messaggio da restituire
	"errore" => false //restituisce false se la password è sbagliata, true se è corretta
);

$dati = array("cane","gatto","topo"); //dati da restituire

if(!isset($isajax)) exit(); //terminiamo lo script se la variabile isajax non esiste

if($password == "targetweb") {
	$return['messaggio'] = "Password Corretta";
	$return['dati'] = $dati;
	echo json_encode($return); //stampiamo il nostro array convertito in formato json
} else {
	$return['errore'] = true;
	$return['messaggio'] = "Password Sbagliata";
	echo json_encode($return); //stampiamo il nostro array convertito in formato json
}

Ho provveduto a commentare il codice ma per completezza di trattazione andrò a spiegare ciascun punto dello script php:

foreach($_POST as $key => $val) {
	${$key} = htmlentities($val); //creiamo le variabili prendendo i valori e i nomi degli indici dell'array post
}

Usiamo la funzione foreach per recuperare tutti i valori e i nomi dell’array _POST, utilizzando questi dati creeremo delle nuove variabili dandogli il nome dell’indice e come valore il “guarda caso” valore, ognuna di queste variabili inoltre sarà formattata usando la funzione htmlentities.

$return = array( //questo array conterrà tutte le informazioni che la funzione ajax riceverà
	"messaggio" => "", //messaggio da restituire
	"errore" => false //restituisce false se la password è sbagliata, true se è corretta
);

$dati = array("cane","gatto","topo"); //dati da restituire

Creiamo 2 array, uno che conterrà i valori che andremo a leggere tramite la nostra funzione ajax e uno che conterrà dei dati che vogliamo restituire se la password inserita corrisponde a quella che abbiamo scelto, questo secondo array sarà inserito come parametro del primo.

if(!isset($isajax)) exit(); //terminiamo lo script se la variabile isajax non esiste

Controlliamo se la variabile isajax esiste, infatti questa non è presente nel form e viene creata tramite la funzione ajax, tutto questo serve ad evitare che lo script venga eseguito in un modo diverso da quello che vogliamo.

if($password == "targetweb") {
	$return['messaggio'] = "Password Corretta";
	$return['dati'] = $dati;
	echo json_encode($return); //stampiamo il nostro array convertito in formato json
} else {
	$return['errore'] = true;
	$return['messaggio'] = "Password Sbagliata";
	echo json_encode($return); //stampiamo il nostro array convertito in formato json
}

Tramite un if controlliamo se la password inserita è uguale a quella che abbiamo scelto “nel nostro caso è targetweb”, se corrisponde l’indice messaggio dell’array return conterrà “Password Corretta”, l’indice dati conterrà l’array dati altrimenti messaggio sarà uguale a “Password Sbagliata”, errore che prima non è stato modificato visto che già settato su true sarà uguale a false e non sarà passato nessun valore per l’indice dati.
Alla fine di ogni if viene stampato a schermo il nostro array in formato json.

Scriviamo la nostra chiamata ajax

$(document).ready(function() {
	$("#tutform").submit(function() {
		var password = $("input[name='password']").val(); //preleviamo il valore dell'input password
		$.ajax({
			type : "POST", //tipo di chiamata "GET o POST"
			url : "1action.php", //script da eseguire
			dataType : "json", //codifica dati 
			data : { //variabili POST  da passare allo script
				isajax : true, //variabile che creiamo per dire allo script che stiamo eseguendo una chiamata ajax
				password : password 
			},
			success : function(data) { //funzione che viene richiamata se lo script viene eseguito con successo
				var messaggio = data.messaggio;
				var errore = data.errore;
				var dati = data.dati;
				if(errore) {
					$("#result").css("color","red").html(messaggio);
					$(".dati").remove();
				} else {
					$(".dati").remove();
					$("#result").css("color","green").html(messaggio);
					var values = "";
					$.each(dati, function(index, value){
						values += '<div class="dati">'+value+'</div>'
					});
					$(values).insertAfter("#input");
					values = "";
				}
			}
		})
	})
})

Andiamo ad analizzare meglio il codice

$("#tutform").submit(function() {

Richiamiamo la funzione submit di jquery

type : "POST", //tipo di chiamata "GET o POST"
url : "1action.php", //script da eseguire
dataType : "json", //codifica dati 
data : { //variabili POST  da passare allo script
	isajax : true, //variabile che creiamo per dire allo script che stiamo eseguendo una chiamata ajax
	password : password 
},

Passiamo alla funzione tutti i dati necessari per il suo corretto funzionamento

  • type: Può essere POST oppure GET
  • url: il file che andremo ad eseguire
  • dataType: Il tipo di dati che andremo a leggere (html, xml, json, ec..)
  • data: un oggetto contenente tutti i valori GET o POST da passare alla pagina
success : function(data) { //funzione che viene richiamata se lo script viene eseguito con successo
	var messaggio = data.messaggio;
	var errore = data.errore;
	var dati = data.dati;
	if(errore) {
		$("#result").css("color","red").html(messaggio);
		$(".dati").remove();
	} else {
		$(".dati").remove();
		$("#result").css("color","green").html(messaggio);
		var values = "";
		$.each(dati, function(index, value){
			values += '<div class="dati">'+value+'</div>'
		});
		$(values).insertAfter("#input");
		values = "";
	}
}

Finalmente andiamo a vedere la parte interessante del codice, se la pagina viene caricata con successo eseguiamo una funzione la quale potrà passare dei valori che noi andremo a inserire dentro la variabile data.
Creiamo 3 variabili

  • messaggio: contiene il messaggio che riferisce all’utente se la password inserita è giusta o sbagliata
  • errore: sarà true se la password è corretta oppure false se è sbagliata
  • dati: contiene un array con i valori che vogliamo restituire solo se la password è corretta

Controlliamo se la password inserita è giusta utilizzando il valore contenuto nella variabile errore

if(errore) {
	$("#result").css("color","red").html(messaggio);
	$(".dati").remove();
} else {
	$(".dati").remove();
	$("#result").css("color","green").html(messaggio);
	var values = "";
	$.each(dati, function(index, value){
		values += '<div class="dati">'+value+'</div>'
	});
	$(values).insertAfter("#input");
	values = "";
}

Se la password è corretta esegue un ciclo foreach per l’array dati e inserisce ogni valore dentro una variabile, mostrandoli successivamente a schermo e mostra un messaggio che informa l’utente che la password è corretta, in caso contrario i dati vengono eliminati e l’utente leggerà un messaggio di errore. Come avete potuto vedere abbiamo usato il linguaggio json per rendere i valori di ritorno più leggibili e facili da utilizzare.

 [button link=”http://www.targetweb.it/download/2014/tutorial-ajax-jquery-Giugno2014.zip” color=”blue” target=”blank” size=”large”]Download Codice[/button]

Spero che questa guida vi sia stata utile e se avete domande non esitate a farle nei commenti sottostanti!

  1. Intanto volevo farti i complimenti per questo esempio finalmente CHIARO e FUNZIONANTE.
    Io però ho una ulteriore necessità:
    Questo demo funziona BENISSIMO se utilizzato sul server, ovvero entrambi i files sono sul sito (esempio: http://www.miosito/index.php e http://www.miosito/1action.php), ma nel mio caso il file chiamante (index.php che ho rinominato in index.html) si trova sul computer LOCALE dell’utente e non mi funziona.
    Ho provato a cambiare url in questo modo:
    url : “http://www.miosito/1action.php”, ed anche in questo caso se si trovano ENTRAMBI sullo stesso server funziona, ma suddividendo i file no.
    Potresti suggerirmi eventuali correzioni? GRAZIE.

    Rispondi

  2. Ciao Giacomo, intanto complimenti per la chiarezza dei tuoi articoli. Ti spiego il mio problema: con una chiamata ajax vorrei poter richiamare il risultato di una SELECT di una pagina php. Io scrivo questo codice:
    index.php
    —-
    function prova() { var x = $(‘#codice’).val(); alert(x);
    $.ajax({ type: ‘POST’, url: “test.php”, dataType: “json”, success: function(data) { alert(‘risultato: ‘ + data); } });
    —-

    test.php
    —-
    $query=mysqli_query($conn, “SELECT * FROM clienti”);
    $rows = array();
    while($r = mysqli_fetch_assoc($query)) {
    $rows[] = $r;
    }
    echo json_encode($rows);
    —-

    Così come è scritto l’alert mi ritorna questo messaggio: “risultato: [object Object]”
    Se provo a cambiare data in data.nome invece mi dice: “risultato: undefined”

    la pagina test.php lanciata direttamente dà questo risultato: [{“ID_cliente”:”12″,”cognome”:”Marzullo”,”nome”:”Antonio”}]

    non riesco a capire dove sbaglio. Ho anche cercato di adattare il tuo esempio ma il risultato è sempre lo stesso. Puoi dirmi cosa mi sfugge?

    Rispondi

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

php-generare-stringhe-casuali
Up Next:

PHP - Generare stringhe casuali

PHP - Generare stringhe casuali
twitch