En este caso nos ofrece una manera muy sencilla de ejecutar peticiones asíncronas (AJAX) sin importarnos como funciona esta tecnología a bajo nivel.
Para realizar este ejemplo necesitaremos 3 ficheros:
- Fichero HTML, dónde tendremos un div en el que mostraremos el contenido devuelto por AJAX.
- Fichero Javascript, dónde llamaremos asíncronamente al fichero PHP.
- Fichero PHP, dónde procesaremos la solicitud que se nos ha enviado desde el fichero Javascript.
En el fichero HTML tendremos definido un div dónde cargaremos el contenido AJAX,
también incluiremos el archivo de JQuery que podemos descargar del siguinte enlace.
<html>
<head>
<title>Ajax con JQuery</title>
<!-- Enlazamos la librería JQuery -->
<script type="text/javascript" src="jquery.js"></script>
<!--Enlazamos el archivo Javascript dónde tenemos la llamada-->
<script type="text/javascript" src="general.js"></script>
</head>
<body>
<!-- Definimos un textbox dónde escribiremos un texto -->
<input name="saludar" type="text"/>
<!-- Añade un link para hacer la llamada AJAX -->
<a href="#" id="enlace">AJAX</a>
<!-- Insertamos un div oculto que visualizaremos tras
recibir la respuesta AJAX -->
<div id ="ajax" style="display:none;"></div>
</body>
</html>
En el fichero Javascript se realiza la petición asíncrona.
// Esta línea se usa para indicarle al framework que cuando
// cargue la página ejecute lo que va a continuación
$(document).ready( function() {
// Con esta linea le indicamos que cúando se haga click
// sobre un elemento con identificador #enlace
$('#enlace').click(function(){
// Recojamos el valor de un "input" cuyo nombre sea "saludar"
var saludar = $("input[name='saludar']").val();
// Y por GET llamemos a un fichero php llamado "procesar.php"
// pasándole como parámetro la variable anteriormente definida
// como "saludar"
// Nota: los parámetros se pasan como JSON
$.get('procesar.php',
{paramentro:saludar
}, function(data){
// Cuando recibimos la respuesta convertimos esa respuesta
// en html y visualizamos esa respuesta en el div
// con id "#ajax" que teníamos oculto en la página HTML
$("#ajax").html(data);
$("#ajax").show();
});
});
});
En el fichero PHP tan solo recibiremos un parámetro por GET y devolveremos un valor mediante el echo.
<?php
$variable = $_GET['paramentro'];
echo "hola ".$variable;
?>
Esto es todo por esta vez. Se admiten sugerencias y colaboraciones.
Escuchando...
The Spinto Band -- Oh Mandy[kml_flashembed movie="http://www.youtube.com/v/y-qCuYEUGug" width="425" height="350" wmode="transparent" /]
Aqué se explica detelladamente como hacerlo:
ResponderEliminarhttp://no-suelo.blogspot.com/2010/09/llamada-ajax-con-jquery-parametros.html