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

Ajax con Jquery y PHP

Suscríbete a nuestro canal en Youtube

Suscríbirse

AJAX 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 5266 veces | 1 usuarios

Código fuente no disponible.

Compartir link del tutorial con tus amigos


Más tutoriales de Jquery

Codea Applications

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Copyright Codea::App Cursos de Programación Online | LATAM | 2020 - 2024