Cómo usar Ajax con Jquery y PHP

Con el Método Ajax de Jquery podemos hacer peticiones asíncronas

Publicado en Jquery 2018-03-08 12:20:13

Cómo usar Ajax con Jquery y PHP

Jquery Ajax para refrescar partes de una web

HTML Jquery

Resumen: Ejemplo Jquery Ajax para actualizar o refrescar secciones de una página web con peticiones asíncronas al servidor que retornan datos y se muestre en la web

 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;
?>

 

Cómo usar Ajax con Jquery y PHP

El resultado podemos verlo en el siguiente video corto de menos de 03 minutos

Descarga el código fuente del proyecto web CLICK AQUI

Redacción:| Artículo leído: 492 veces | Publicación:


Compártelo con tus amigos


Publicaciones relacionadas de Jquery