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

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

 

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

Whatsapp Messenger Facebook Twitter
ó copia el link

¿Quieres el código fuente del proyecto
Ajax con Jquery y PHP?

...por favor suscríbete gratuitamente para descargarlo

SUSCRÍBIRME

Visitado 336 veces | Publicado hace 1 año

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

Ver scripts de JQUERY

Aprende a crear una app para restaurante en Android con el curso básico de Android completamente gratis

VER EL CURSO DE ANDROID

Programación en JQUERY

Ejemplos y scripts de programación para tus proyectos

Lo último que estamos programando en el curso: Lector de Códigos QR ANDROID PHP MYSQL

Últimos detalles diseño y prueba de la app Lector Market Alis

Diseño y prueba final del Lector QR

© Todos los derechos reservados | codea.app | Comunidad de programación web y desarrollo de aplicaciones móviles | Perú 2019