JQuery AJAX

De Wikijoan
Dreceres ràpides: navegació, cerca

Contingut

Introducció

Fins ara hem vist com fer crides asíncrones AJAX de forma nadiua. Creem l'objecte xmlhttp, fem un open, fem un send, esperem el status 4, i recuperem la informació que ens ha enviat el servidor, i amb aquesta informació pintem una capa. Aquest és el mètode que hem utilitzat en les pràctiques de les receptes de cuina i dels municipis.

Ara veurem com podem utitlitzar jQuery per fer crides AJAX, amb els avantatges que proporciona utilitzar un framework com jQuery: encapsulament, reducció de codi. Amb jQuery perdem la perspectiva del que estem fent, però guanyem productivitat.

L'inconvenient és que encara no hem estudiat jQuery, i no ho farem fins la següent unitat formativa, per tant haurem de fer algun acte de fe.

Referències

Exemple jQuery AJAX

En aquest exemple senzill i introductori seleccionarem un número del 1 al 10, i el servidor ens calcularà la taula de multiplicar corresponent. Utilitzarem els mètodes $.post(), $.get i el genèric $.ajax per passar la informació de quina taula de multiplicar volem veure.

Recordatori entre la diferència d'utilitzar post o get:

Utilitzant $.post

taula_multiplicar.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>Taula de multiplicar amb jQuery - AJAX</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("select").change(function(){
	//alert($("select").val());
  	valor = $("select").val();
	$.post("calcular_taula.php",
    {
      value:valor
    },
    function(data,status){
      //alert("Data: " + data + "\nStatus: " + status);
		$("#resultat").html(data);
    });

  });
});
</script>
<meta http-equiv="content-type" content="text/html charset=utf-8" />
</head>
<body>
<h2>Selecciona una taula de multiplicar</h2>
<div id="taula">
	<select name="taula">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
	<option value="10">10</option>
	</select>
</div>
<div id="resultat">
</div>
</body>
</html>

calcular_taula.php:

<?php
$valor = $_POST["value"];
//echo $valor;
for ($i = 1; $i <= 10; $i++) {
    echo $valor. " * ".$i." = ".$valor*$i."<br />\n";
}
?>

Utilitzant $.get

taula_multiplicar2.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>Taula de multiplicar amb jQuery - AJAX</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("select").change(function(){
		valor = $("select").val();
		$("#resultat").html( "<img src='img/ajax_wait.gif' />" );
		var request = $.ajax({
			url: "calcular_taula2.php",
			type: "GET",
			data: {value : valor},
			dataType: "html"
		});
		request.done(function(data) { $("#resultat").html( data ); } );
	});
});
</script>
<meta http-equiv="content-type" content="text/html charset=utf-8" />
</head>
<body>
<h2>Selecciona una taula de multiplicar</h2>
<div id="taula">
	<select name="taula">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
	<option value="10">10</option>
	</select>
</div>
<div id="resultat">
</div>
</body>
</html>

calcular_taula2.php:

<?php
sleep(1);
$valor = $_GET["value"];
//echo $valor;
for ($i = 1; $i <= 10; $i++) {
    echo $valor. " * ".$i." = ".$valor*$i."<br />\n";
}
?>

utilitzant $.ajax (amb POST)

En aquest cas també farem un sleep(1) en el fitxer php, i pintarem la imatge ajax_wait.gif mentre no estigui completa la petició.

taula_multiplicar3.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>Taula de multiplicar amb jQuery - AJAX</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("select").change(function(){
		valor = $("select").val();
		$("#resultat").html( "<img src='img/ajax_wait.gif' />" );
		var request = $.ajax({
			url: "calcular_taula3.php",
			type: "POST",
			data: {value : valor},
			dataType: "html"
		});
		request.done(function(data) { $("#resultat").html( data ); } );
	});
});
</script>
<meta http-equiv="content-type" content="text/html charset=utf-8" />
</head>
<body>
<h2>Selecciona una taula de multiplicar</h2>
<div id="taula">
	<select name="taula">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
	<option value="10">10</option>
	</select>
</div>
<div id="resultat">
</div>
</body>
</html>

calcular_taula3.php:

<?php
sleep(1);
$valor = $_POST["value"];
//echo $valor;
for ($i = 1; $i <= 10; $i++) {
    echo $valor. " * ".$i." = ".$valor*$i."<br />\n";
}
?>


creat per Joan Quintana Compte, febrer 2019

Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
Institut Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines