Ajax con Jquery y PHP

Cómo usar Ajax con Jquery y PHP

Ajax con Jquery y PHP

Cómo usar Ajax con Jquery y PHP

DESCARGAR

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

 


¿Quieres descargar el código fuente Ajax con Jquery y PHP?
...por favor suscríbete gratuitamente para descargarlo

DESCARGAR

Compártelo...talvez alguién lo necesite!

Whatsapp Messenger Facebook Twitter
ó copia el link

Visitado 443 veces | Publicado hace 1 año

Más códigos de programación en JQUERY.

Ver scripts de JQUERY

© Todos los derechos reservados CODEA APLICACIONES | Comunidad de programación web y desarrollo de aplicaciones móviles | 2020