Joan: /* utilitzant $.ajax (amb POST) */

2018-09-20T15:35:57Z

utilitzant $.ajax (amb POST)

Pàgina nova

=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=
*http://www.w3schools.com/jquery/jquery_ajax_intro.asp
*http://api.jquery.com/jQuery.ajax/

=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''':
*http://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=527:get-y-post-html-method-formas-de-envio-de-datos-en-formulario-diferencias-y-ventajas-ejemplos-cu00721b&catid=69:tutorial-basico-programador-web-html-desde-cero&Itemid=192

==Utilitzant $.post==
'''taula_multiplicar.htm''':
<pre>
<!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>
</pre>
'''calcular_taula.php''':
<pre>
<?php
$valor = $_POST["value"];
//echo $valor;
for ($i = 1; $i <= 10; $i++) {
echo $valor. " * ".$i." = ".$valor*$i."<br />\n";
}
?>
</pre>
==Utilitzant $.get==
'''taula_multiplicar2.htm''':
<pre>
<!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>
</pre>
'''calcular_taula2.php''':
<pre>
<?php
sleep(1);
$valor = $_GET["value"];
//echo $valor;
for ($i = 1; $i <= 10; $i++) {
echo $valor. " * ".$i." = ".$valor*$i."<br />\n";
}
?>
</pre>
==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''':
<pre>
<!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>
</pre>

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

</pre>

{{Autor}}, febrer 2019
[[Categoria: Institut Jaume Balmes]]
[[Categoria: Assignatura DAW-M06-WEC]]

JQuery AJAX - Historial de revisió

Joan: /* utilitzant $.ajax (amb POST) */