24 octubre, 2018
Ajax con Jquery y PHP
Actualizar o refrescar secciones de una página web con peticiones asíncronas al servidor es la tecnología AJAX que retornan datos y se muestre en la web
Suscríbete a nuestro canal en Youtube
SuscríbirseAJAX es una tecnología que nos permite realizar acciones en una página web que necesiten respuesta del servidor sin recargarla. Con ello conseguimos que nuestra web sea dinámica y por tanto obtener un diseño más atractivo. Jquery posee un método llamado ajax() que permite realizar peticiones asíncronas al servidor y retornar datos según el tipo de petición
En este miniutorial, realizaremos la petición desde una página html cuyo contenido es una lista de nombres de departamentos "Arequipa y Cusco". La funcionalidad ajax es que nos retorne las provincias de cada departamento enn un lista adicional.
Para tal efecto, identificamos la lista donde el Item Arequipa tiene como ID deArequipa y el item Cusco tiene como ID deCusco, cada vez que se haga click en los elementos con estos identificadores se hará la petición al servidor para retornar en la capa DIV identificada con el ID resultado la lista correspondiente de provincias de acuerdo al departamento clickeado
Veamos el código en JQuery:
<!DOCTYPE html>
<html>
<head>
<title>Apptivaweb | Ajax</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(e){
$("#deArequipa").click(function(){
mostrarProvincias("arequipa")
})
$("#deCusco").click(function(){
mostrarProvincias("cusco")
})
function mostrarProvincias(valor){
var parametros = {
"valor" : valor,
};
$.ajax({
data: parametros,
url: 'proceso.php',
type: 'post',
beforeSend: function () {
$("#resultado").html("Procesando, espere por favor...");
},
success: function (response) {
$("#resultado").html(response);
}
});
}
})
</script>
</head>
<body>
<p>Cargar provincia de :</p>
<ul>
<li id="deArequipa">Arequipa</li>
<li id="deCusco">Cusco</li>
</ul>
<div id="resultado"></div>
</body>
</html>
Y de parte del servidor veamos el script PHP: donde verifica si existe un POST de ser asi luego extrae el valor de $_POST['valor'] y lo compara con los string del condicional switch para luego retornar la lista correspondiente a cada departamento; si no existe el POST retorna un mensaje de alerta.
<?php
if(isset($_POST)):
switch ($_POST['valor']):
case 'arequipa':
echo "<ul><li>Arequipa</li><li>Islay</li><li>Condesuyos</li><li>La Unión</li><li>Camaná</li><li>Caylloma</li><li>Caravelí</li><li>Castilla</ul>";
break;
case 'cusco':
echo "<ul><li>ACOMAYO</li><li>ANTA</li><li>CALCA</li><li>CANAS</li><li>CANCHIS</li><li>LA CONVENCION</li><li>CUSCO</li><li>CHUMBIVILCAS</li><li>ESPINAR</li><li>PARURO</li><li>PAUCARTAMBO</li><li>QUISPICANCHIS</li><li>URUBAMBA</li></ul>";
break;
default:
# code...
break;
endswitch;
else:
echo "no existe post";
endif;
?>
Leido 4819 veces
