30/01/2023 jquery 3m 43s 0 2785
En estos últimos años la velocidad de carga de los sitios webs ha ido cobrando cada vez más importancia debido principalmente a 2 factores,...
Llamar a un archivo externo por AJAX con PHP y jQuery
12 de /mayo05 de /2014
3m 36s
jquery
2 comentarios
11929
5
Entendemos AJAX como una tecnica o tecnología ejecutable en el lado del cliente, válida para múltiples plataformas y que combina varios lenguajes de programación especificos. Nos permite entre otras cosas realizar acciones en una web que necesite alguna respuesta del servidor sin necesidad de tener que recargarla. Podemos llamar a un archivo PHP para mostrar simplemente su contenido, invocar a una función externa que nos genere o nos devuelva algún valor o crear de forma mas eficiente funciones dinamicas para servicios como inicios de sesión y actualización de perfiles de usuario. Conseguimos de esta forma hacer que una página web pese menos, se recargue menos y sea mas dinámica.
Para entender mejor el uso de esta tecnica vamos a crear un archivo HTML en el que llamaremos mediante un enlace a un archivo PHP para mostrar su contenido.
El index.html contendrá un enlace con un identificador y un <div> sin contenido con un identificador, en la cabecera incluimos la libreria de jQuery y una función que se encargará de traer el contenido del archivo PHP a la página sin movernos de ella.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
$("#llamar_AJAX").on("click", function(e){
e.preventDefault();
$("#contenido_php").load("contenido_php.php");
});
});
</script>
</head>
<body>
<a href="#" id="llamar_AJAX">Llamar al contenido PHP</a>
<div id="contenido_php"></div>
</body>
</html>A continuacion creamos el archivo contenido_php.php, en el que podemos incluir cualquier contenido
<?php echo '<h2>AJAX</h2>'; echo '<p>Este es el contenido que ha sido llamado por AJAX</p>';
?>Al pulsar el enlace el <div> contenido_php se mostrará con el contenido del archivo al que hemos llamado.
Ahora que ya hemos entendido esta función simple, podemos crear mediante esta tecnica funciones mas complejas, por ejemplo, podemos crear un sistema que nos devuelva un valor en función de los datos introducidos en un formulario.Ejemplo:
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form name="formulario" id="form_id" action="devuelve.php">
Introduce tu edad: <input type="number" name="valor" value=" ">
<input type="submit" value="Enviar">
</form>
<br>
<div id="contenido"></div>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$("#form_id").on("submit", function(e){
e.preventDefault();
$.post("devuelve.php", $("#form_id").serialize(), function(respuesta){
$("#contenido").html(respuesta);
});
});
</script>
</body>
</html>devuelve.php
<?php
if ($_POST["valor"]>17) {
echo "<p>"."Eres mayor de edad"."</p>";
}
else {
echo "<p>"."No eres mayor de edad"."</p>";
}
?>El código de este articulo con todos los ejemplos, está disponible en mi cuenta de Github.
Valoraciones
2 valoraciones
Tu valoración
Quizás te interese ...
22/03/2020 jquery 1m 20s 0 4515
Los parámetros de url son muy útiles para pasar datos a aplicaciones web, hoy en día su uso se está extendiendo más gracias a NodeJS, el...
6/12/2015 jquery 6m 40s 3 6017 4.7
¿Cuantas funciones js hay en total en nuestro sitio web? Conforme va creciendo nuestro sitio, necesitamos incluir funciones que normalmente...
10/06/2015 jquery 10m 53s 1 2901 5
La barra de navegación (navbar) es sin duda una de las piezas fundamentales de un proyecto, pero no por ello se ha de construir un devorador...
anonimus 30 enero, 2020
muy bueno .
Dowar 24 febrero, 2019
Fantástico me sirvió mucho