Uso de Ajax muy sencillo con jQuery

  • Por
Es muy fácil desarrollar Ajax en jQuery. En este artículo veremos el ejemplo más sencillo de Ajax con el framework Javascript jQuery.
Ha llegado el momento de hacer una primera aproximación a Ajax, en la serie de artículos que estamos publicando en DesarrolloWeb.com para mostrar el uso de este framework (léase el Manual de jQuery).

Una de las ventajas de los frameworks Javascript es que nos permiten desarrollar scripts que hacen uso de Ajax de una manera muy fácil y encima, sin tener que complicarnos la vida con la compatibilidad entre distintos navegadores. Sin duda, cualquier persona que sepa un poco de Javascript, podría en poco tiempo empezar a utilizar Ajax con alguno de estos frameworks. Nosotros vamos a demostrar cómo es de sencillo en jQuery.

La primera impresión que he tenido sobre el uso de Ajax en jQuery es realmente grata, por la facilidad con la que se puede realizar un primer ejemplo. Se trata de un ejemplo extremadamente sencillo, pero sirve para abrirnos las puertas a muchas aplicaciones interesantes. Habíamos visto en otros frameworks Javascript ejemplos similares, como en el artículo Ajax con Mootools, pero tenemos que quitarnos el sombrero ante la extremada sencillez con la que se puede hacer un ejemplo similar en jQuery. Sea suficiente decir que en este ejemplo de Ajax utilizaremos tan sólo 4 líneas de código, de las cuales sólo 1 es para ejecutar la propia llamada al servidor por Ajax.

Traer un contenido con Ajax al pulsar un enlace

En este sencillo ejemplo haremos llamada a Ajax, para traer un contenido, cuando se pulse un enlace. Esto lo hemos puesto en marcha en el servidor de DesarrolloWeb.com y lo puedes ver en una página aparte.

Aquí podemos ver el enlace, al que ponemos un identificador (atributo id) para seleccionarlo desde jQuery.

<a href="#" id="enlaceajax">Haz clic!</a>

Si hemos leído hasta aquí el Manual de jQuery podremos saber cómo asignar un evento a un enlace. No obstante, recordemos cómo asignar una función para cuando se haga clic en el enlace:

$(document).ready(function(){
   $("#enlaceajax").click(function(evento){
      //elimino el comportamiento por defecto del enlace
      evento.preventDefault();
      //Aquí pondría el código de la llamada a Ajax
   });
})

Ya se trata sólo de poner en marcha Ajax dentro de la función del evento "click" sobre el enlace. Pero antes voy a necesitar una capa donde mostrar el contenido que vamos a recibir del servidor con la llamada Ajax. Le pondremos id="destino" para poder referirnos a ella desde jQuery:

Y ahora la parte más interesante, donde podemos ver qué tan fáciles son las cosas con este framework Javascript. Una única línea de código será suficiente:

$("#destino").load("contenido-ajax.html");

Con esta simple sentencia estamos realizando una llamada a Ajax con jQuery. Es una simple invocación al método load() de un elemento de la página, en concreto el que habíamos puesto con id="destino". Al método load() le pasamos como parámetro la ruta de la página que queremos cargar dentro del elemento.

El archivo que cargamos con load() en este ejemplo es "contenido-ajax.html" y simplemente le hemos colocado un texto cualquiera. Lo hemos guardado en el mismo directorio que la página web donde está el script jQuery.

Nota: para que este ejemplo funcione debe colocarse en un servidor web, puesto que la llamada por Ajax se hace por http y el archivo que se carga entonces tiene que recibirse por un servidor web, que lo mande con ese protocolo al navegador. Si pones los archivos en tu disco duro y los ejecutas tal cual, no te funcionará. Puedes utilizar cualquier espacio de hosting que tengas o bien un servidor web que puedas tener instalado en tu ordenador.

Así de simple! Podemos ver el código completo de este ejemplo:

<html>
<head>
   <title>Ajax Simple</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>   
<script>
$(document).ready(function(){
   $("#enlaceajax").click(function(evento){
      evento.preventDefault();
      $("#destino").load("contenido-ajax.html");
   });
})
</script>
</head>
<body>

<a href="#" id="enlaceajax">Haz clic!</a>
<br>
<div id="destino"></div>

</body>
</html>

Podemos ver el ejemplo en marcha en una página aparte.

Cabría comentar que jQuery tiene muchos otros métodos de realizar conexiones por Ajax, que pueden servir para muchos otros casos de trabajo que podemos encontrarnos. Nosotros hemos escogido el más sencillo para dar una primera demostración de las posibilidades.

Pasar parámetros y ejecutar acciones después de la llamada a Ajax

El método load() que hemos visto en el ejemplo anterior tiene otros dos parámetros opcionales que podemos utilizar si fuera necesario:

Parámetros a pasar a la página: la página que carguemos con Ajax puede recibir parámetros por la URL, que se especifican con la típica notación de propiedades y valores de jQuery.

{nombre: "Pepe", edad: 45}

Por ejemplo, con ese código estaríamos enviando a la página los datos nombre y edad, con los valores "pepe" y 45. Esos datos viajarían en la URL, por el método "POST".

Nota: Desde jQuery 1.3 también se pueden enviar los parámetros a la página a cargar con Ajax por medio de una variable de tipo string, en lugar de una notación de objetos como hemos comentado. Cuando se use un string para especificar los parámetros a enviar en el request http, éstos viajan por el método GET. Cuando se utiliza una notación de objetos como la que hemos visto, los datos viajan por el método POST.

Función callback: como otros métodos de jQuery, podemos especificar opcionalmente una función a ser ejecutada cuando se termine de ejecutar el método. En este caso, cuando se termine la llamada Ajax, se pueden hacer acciones, como borrar un mensaje típico de "cargando...".

Nota: En un artículo anterior ya comentamos el habitual uso de funciones callback en jQuery.

Ahora veamos un código donde hacemos uso de estos dos parámetros:

$(document).ready(function(){
   $("#enlaceajax").click(function(evento){
      evento.preventDefault();
      $("#destino").load("recibe-parametros.php", {nombre: "Pepe", edad: 45}, function(){
         alert("recibidos los datos por ajax");
      });
   });
})

En este caso estamos cargando con load() una página PHP llamada "recibe-parametros.php". Estamos pasando los parámetros "nombre" y "edad" a una página, que podremos recoger por GET. Además, hemos colocado una función callback en la que simplemente hacemos un alert(), que se ejecutará cuando la llamada a Ajax haya terminado.

Este sería el código fuente de "recibe-parametros.php":

Recibido el siguiente dato:
<br>
Nombre: <?php echo $_POST["nombre"];?>
<br>
Edad: <?php echo $_POST["edad"];?>

Podemos ver este ejemplo en una página aparte.

Con esto hemos podido comprobar lo sencillo que es realizar con jQuery una carga de contenidos que se reciben por Ajax. Como decía, existen muchas otras maneras de hacer conexiones Ajax con jQuery, como el ejemplo del artículo siguiente que nos enseña a mostrar un mensaje de carga miestrás esperamos la respuesta Ajax del servidor. Además, para complementar esta información, también podéis ver el vídeo de Ajax con jQuery.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Isabel Ramos

05/6/2009
im pre sionante
Nunca pensé que sería tan sencillo programar un script con Ajax!
Salu2!

herohat

15/6/2009
recoger los parámetros por GET o por POST?
Hola,

Una observación. En el artículo, casi al final dice: "Estamos pasando los parámetros "nombre" y "edad" a una página, que podremos recoger por GET."

Pero en la página en cuestión que se armo en .php, puedo observar que los parametros se recogieron (según este ejemplo) vía POST....


Gracias

Lucio ARango

16/6/2009
es posible generar plantilla??
El metodo me parece interesante, pero es posible crear una plantilla en base a esto.. es decir un archivo dwt de dreamweaver?

oscar

17/6/2009
Excelente Tema
En verdad me parecio muy bien los contenidos que montan espero que sigan colocando mas temas como este de Ajax, es muy interesante, aunque yo no entienda mucho de esto por ser algo novato en este campo.

midesweb

25/6/2009
Ajax por POST, pero también puede ser por GET
Hola herohat,

Gracias por tu puntualización, sobre el GET o POST. Efectivamente, teníamos un error en el texto, que ya hemos corregido y hemos colocado además una nota sobre en qué momento se utiliza POST y GET.

Hasta pronto!

Cristian

19/7/2009
E-X-C-E-L-E-N-T-E
Como diría el bambino veira "impresionante", no solo por el contenido, sino por las ganas que le mente para que el artículo sea claro y detallado.
Graciasss

Aquilino

05/9/2009
Php con variables sólamente
¿Se podría usar este método para cargar una página en php que sólamente contenga variables, o sea, hacer un include de ese documento pero sin recargar la página?

Edison

07/12/2009
Ajax
Es muy interesante el manual. agradezco por esta ayuda.

Violetacat

11/2/2010
Como realizar un cambio a ese script
Hola como esta, el articulo esta excelente y me ha sido muy util ahora que estoy empesando a trabajar con javascript, pero tengo una duda me gustaria saber como hago para pasarle a el script una variable que capturo en un select que se encuentra en la misma pagina en donde utilizo el script; la verdad he intentado varias cosas pero no me ha salido ninguna por eso te pregunto...

Espero me puedes respender muchas gracias

jose_lakatos

19/2/2010
Como realizar un cambio a ese script
En respuesta a lo que plantea violetac, creo que te servira esto:
document.forms['mi_Form']['mi_Select'].value

De esta forma,navegando por el arbol DOM selecionarias el valor actual de tu select.
Tambien podrias usar :

document.getElementById("miSelect").value

Ya que con la funcion getElementById("miSelect") ya obtendrias el elemento del arbol DOM cuyo id es "miSelect" , y ya con ".value" accederias al valor de tu select.

Espero que te sirva de ayuda.
Un saludo

Lkzwieder

23/6/2010
Problemas al pasar una variable, de una funcion a otra
Tengo un problema, no se como pasar la variable idBoton como para que me la envie por AJAX teniendo el siguiente codigo... desde PHP recibo bien la variable 'datas', pero no asi la idBoton, supongo que la misma existe solo dentro de la funcion que fue creada, pero si pongo un 'return idBoton;' al final de la funcion esa se me cuelga el browser :S

/*Capturo datos de CKEDITOR*/
var datas = CKEDITOR.instances.editor.getData();

/*JQUERY*/
$('.edit').click(function(){
var idBoton = this.id; /*Capturo ID del boton presionado*/
$('#botones').hide('fast');
$('#texto').show('fast');
$('#lateral').hide('fast');
});

$('a.enviar').click(function(){
$.post('ajax/enviar.php',{'id':idBoton,'data':datas}, function(datoEditor){
$('#texto').append(datoEditor);
});
});

Angel Rodriguez

16/7/2010
Problemas con flash
Un saludos,

Quiero agradecerles por este post me ha servido de mucho. Tengo un problema, resulta que uno de los archivos .html que invoco con la funcion, contiene una animacion en flash y cuando doy clic en el enlace me carga todo el texto del archivo menos la animacion, pero cuando cargo el archivo .html solo si se ve la animacion.

Ayudemne por favor, que puedo hacer.

Saludos

safitanet

23/8/2010
no funciona en internet explorer 8
Hola, no he conseguido que funcione vuestro ejemplo con jquery 1.4 en internet explorer 8. Y sí ha funcionado correctamente en Opera, Safari, Chrome y Firefox. Podéis indicar cómo funcionaría en ie8?

Gracias

DarkF

03/9/2010
Hacer un append con un resultado de ajax en jQuery
Saludos amigos de desarrolloweb,

Tengo una duda, cómo puedo hacer que un contenido que se obtenga por medio de ajax (bien sea con el método $("#destino").load("ajax.html"); u otro) que el mismo sea agregado a la etiqueta con id destino sin borrar lo que actualmente existe en ella? o sea realizar un append.

Les agradecería su respuesta,

Muchas gracias, continuen siendo la mejor web de referencia para los desarrolladores hispanoparlantes.

Albert

07/9/2010
Probar ésto
Aqué se explica detelladamente como hacerlo:

http://no-suelo.blogspot.com/2010/09/llamada-ajax-con-jquery-parametros.html

safitanet

20/9/2010
no funciona en internet explorer 8
Holaa, he probado el ejemplo en varios navegadores y en el internet explorer 8 no funciona. He buscado por internet, y según la web de jquery 1.4, algo hay que cambiar del código javascript para que funcione, pero yo no he conseguido entenderlo. Si pudieráis explicarlo aquí tan claro como este manual sería genial.

Un saludo

lucas

18/10/2010
Ejemplos jQuery
Excelente articulo, aca les dejo una pagina donde pueden encontrar ejemplos jquery y tutoriales paso a paso
<a href="http://www.ajaxshake.com">jQuery Ajax Examples</a>

jaspher

28/1/2011
Se podra actulizar in div
Hola, jquery me ha ayudado mucho, pero tengo una duda,
Será posible actualizar solamente una parte de la pagina, por ejemplo un
<div id="destino">
<?php
////codigo que mostraría lista de base de datos, por ejemplo noticias o post de los usuarios
?>
</div>
y no tener que recurir a otra pagina lista.php para que la cargue y la muestre dentro del div?
el metodo de load, recurre a otro archivo para que efectue: por ejemplo
$('#destino').load('ajax/test.html', function() {
alert('Load was performed.');
});
y no quiero recurrir a otra pagina, sera posible hacer lo que digo con jquery o con otro script.
He visto algo parecido con asp.net, creo que es "updatepanel", quisiera hacer esto en php.
Porfa una ayuda con esto y gracias por la ayuda

jose

19/3/2011
cargar una pagina con jquery
hola tengo una consulta con cargar una pagina con jquery con el codigo
$("#destino").load("prueba.php");
el problema es que me carga la pagina con error, debido a que la pagina php me pide dos variables una $id y otra $id1 y no se como enviar estas variables php

Omar

25/4/2011
Que sucede sino es success load
cual sera el metodo en dado caso que load no cargue exactamente lo buscado, algun error en el path del load, me refiero callback.. seria una sencilla condicion de sino ..o ahy otra forma que indique pinte no cargado haciendo el return

saludos

raul tufet

16/6/2011
LOAD. Paso una variable y no llega
Ya no se que probar. Quiero pasar los datos que un input por load y no lo consigo. Por ejemplo la variable 'cantidad_u' y no llega, en cambio si pongo el valor directamente si que llega. por ejemplo "Hola que tal". Este es el codigo afectado:

<html>
<head>
<style type="text/css">
A:link, A:visited { text-decoration: none }
</style>
</head>
<body style="font-size:62.5%;" leftmargin="0" bgcolor="#0C3A2D" TEXT="#CCCCCC" LINK="#CCCCCC" VLINK="#CCCCCC">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script language="JavaScript">
$(document).ready(function(){
$("#f_ingredientes").live("click", function(evento){
evento.preventDefault();
$("#d_ingredientes").load('r_ingredientes.php', {v_cantidad_u:cantidad_u, v_cantidad_d:cantidad_d, v_unidad_de_medida:unidad_de_medida, v_ingrediente:ingrediente});
});
$("#f_explicaciones").live("click", function(evento){
evento.preventDefault();
$("#d_explicaciones").load('r_explicaciones.php', {frase:"hola que tal"});
});
})
</script>

<table CELLSPACING="0" CELLPADDING="0" width="100%" HEIGHT="100%">
<tr>
<td align="center" valign="center">
<form method='POST' action='introducirreceta2.php'>
<table>
<tr>
<td align='center'>
<font size='4'>Ingredientes</font>
</td>
</tr>
<tr>
<td align='center'>
<div id='d_ingredientes'></div>
</td>
</tr>
<tr>
<td align='center'>
<table CELLSPACING="0" CELLPADDING="0">
<tr><td colspan='2' align='center'>Cantidad</td><td align='center'>U. de medida</td><td align='center'>ingrediente</td><tr>
<tr><td><INPUT type='text' size='3' name='cantidad_u' id='cantidad_u' value='1'>,</td><td><INPUT type='text' size='3' name='cantidad_d' id='cantidad_d'></td><td>&nbsp;<INPUT type='text' size='15' name='unidad_de_medida' id='unidad_de_medida'>&nbsp;</td><td><INPUT type='text' size='25' name='ingrediente' id='ingrediente'></td><td>&nbsp;<a href='#' id='f_ingredientes'><img height='15' width='15' src='add.gif'></a></td><tr>
</table>
</td>
</tr>
<tr>
<td align='center'>
<BR>&nbsp;<BR>&nbsp;<font size='4'>Explicaciones paso a paso</font>
</td>
</tr>
<tr>
<td align='center'>
<div id='d_explicaciones'></div>
</td>
</tr>
<tr>
<td align='center'>
<INPUT type='text' size='70' name='frase' id='frase'>&nbsp;<a href='#' id='f_explicaciones'><img height='15' width='15' src='add.gif'></a>
</td>
</tr>
<tr>
<td align='center'>
<BR>&nbsp;<BR>&nbsp;
<INPUT type='submit' name='B1' value='Grabar'>
</td>
</tr>
<table>
</form>
</td>
</tr>
</table>
</body>

</html>

Berna

06/7/2011
jQuery+ajax
Hola

Tengo el siguiente problema:

El codigo javascriptque hay dentro de la capa q se refresca no se ejecuta.

Hay alguna solución???

Gracias.

Anonimo

07/7/2011
Varios link resultados de una consulta
Me podrían ayudar, me gustó mucho el ejemplo, es muy sencillo, pero estoy tratando de hacer eso mismo con varios link de una lista que resulta de una consulta a MySQL, y no se como decirle al $("").click ... que podria ser link1 o link2, de igual manera el parámetro que enviaría podría cambiar {parámetro: algun_id}

Les agradezco mucho su ayuda

macatapichon

25/11/2011
Gracias
Que facil que se hace todo cuando hay gente que se toma el tiempo de explicar las cosas de manera tan sencilla y didáctica. Son unos grandes

darkmoor

16/12/2011
consulta
Disculpa , para poder cargar por ej una imagen en vez de un archivo php o html como se hace ?? ya que si se carga de forma directa muestra los caracteres de la imagen

erickbuzz

10/1/2012
dudas
se lo básico de php, pero creo que aun no entiendo la utilidad de enviar las variables con jquerry

Por ejemplo tengo un formulario en php, lo envio y (dependiendo si es por GET o POST) se reciben las variables en otro pagina( o la misma)....donde entra jquerry o cual es su uso?

joednet

27/1/2012
problemas con load jquery
Cuando uso $("#destino").load("datos.php"); siempre muestra los datos guardados en temporales. Cómo s epuede hacer para que vuelva a recargar desde el servidor. Tengo que elimnar los archivos temporales para que me muestre los datos actualizados.

martinfd

11/4/2012
No funciono
1º - Felicitaciones por el tutorial.

Segui el ejemplo propuesto aquí pero no logré que funcionara. Se actualiza correctamente el div, recibe los datos de la pagina recibe-parametros.php, pero no las variables. Incluso dentro del código php inserto algún texto para ver si lo imprime y no lo imprime.
¿Cuál puede ser el error? ¿recibe las variables correctamente? Dejo el código debajo.

****************

Pagina HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax simple con JQUERY 2</title>
<script src="jquery-1.7.2.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#enlaceajax").click(function(evento) {
evento.preventDefault();
$("#destino").load("recibe-parametros.php"),{nombre:"Pepe", edad:45}, function(){
alert("recibidos los datos por ajax");
};
});
})
</script>

</head>

<body>

<a href="#" id="enlaceajax">Haz clic!</a>
<br />
<div id="destino"></div>

</body>
</html>





***********
pagina PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Recibir parametros con ajax JQuery</title>
</head>

<body>

Recibido el siguiente dato:
<br />
Nombre: <?php echo $_POST['nombre'];?>
<br />
Edad: <?php echo $_POST["edad"];?>

</body>
</html>

Saludos y gracias.

andres_martin_brun

07/6/2012
Como usar este script para enviar paginas diferentes a un div.
Hola buenas tardes,
yo antes tenia una funcion que llamaba a ajax y enviaba una pagina cualquiera a la la zona de mi web llamada CentrDrch.
el javascript que usaba era:
/**** Manda una Pagina html o php a una capa o div de una pagina ****/
function Enviar(_pagina,capa) {
var ajax;
ajax = ajaxFunction();
ajax.open("POST", _pagina, true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

ajax.onreadystatechange = function() {
if (ajax.readyState==1){
document.getElementById(capa).innerHTML = " Aguarde por favor...";
}
if (ajax.readyState == 4) {

document.getElementById(capa).innerHTML=ajax.responseText;
}}

ajax.send(null);
}
adicionalmente usaba la función ajaxFunction(), para poner que se estaba cargando e intanciar Ajax.

Esto funciona perfectamente. usandolo en un menu:
....
<li><a href="javascript:Enviar('Pagina1.php','CentroDrch')" id="21">Opción 1</span></a></li>
<li><a href="javascript:Enviar('Pagina2.php','CentroDrch')" id="22">Opción 2</span></a></li>

He intentado hacer lo mismo con jQuery y no me responde.
¿podria alguien ayudarme?.
He instalado una función como la del articulo en
$(document).ready(function()
{
.........
$("#enviar").click(function(evento){
evento.preventDefault();
$("#CentroDrch").load("AltaDeColegiados.php");
});
});
Y en el cuerpo del html he puesto
......
<div class="menu_body">
<a id="enviar" href="Beneficios.html">Beneficios</a>
<a id="enviar" href="convenios.html">Convenios</a>
<a id="enviar" href="Altas.php">Alta</a>
</div>
...

Gusttavo

25/10/2012
Faltaba cerrar unos parentesis
Faltaba cerrar unos parentesis a la linea que debiera quedar asi :

$("#destino").load("recibe-parametros.php", {nombre: "Pepe", edad: 45}, function(){alert("recibidos los datos por ajax")});

Aron Gutierrez

24/4/2013
Duda
¿Cómo lo hago si quiero que el contenido cargado pueda cargar contenido dentro del mismo?

luis manuel alducin

24/4/2013
ayuda
tengo este codigo y no se por que me marca error alguien me puede ayudar


$.ajax({
type:"POST",
url:"validar_usuario.php",
data:{usuario:nombre_usaurio},
success: function(usuario){
if(usuario==0)
{
alert("usuario no existe");
}else{
$document.submit();
};
}
})

Gsun

06/8/2014
Hard Techno
Estoy utilizando VS express para web 2013 par realizar el tutorial,¿Debería funcionar el primer ejercicio de este capitulo?, porque no hace lo del ejemplo.

pperalta

12/2/2015
Consulta
Hola foro.
Estoy desarrollando un sitio (mi primer trabajo), y tengo un inconveniente.
Relacionado con el artículo del uso de Ajax. Tengo en el programa que estoy desarrollando un pedido de parte de mi cliente que no puedo resolver.
Necesito tener un enlace; (<a>Ir a...</a>); que me permita descargar en un TAG DIV el contenido de un enlace externo. Por ejemplo descargar la págian de Google en el DIV.
Lo estoy haciendo con AJAX y no puedo lograr que descargue el sitio externo en el DIV en cuestión. Si. Lo puedo hacer si accedo a alguno de los script de PHP del programa; o sea con eso no tengo inconveniente.
Si alguien puede guiarme o darme una mano se lo voy a agradecer.
Un saludo cordial.

emiliano

28/8/2015
Error a llamar pagina que muestra un mapa
Buen dia , espero me puedas ayudar , el ejemplo me funciona perfecto , el problema que tengo es que cuando en la pagina destino , la que va a buscar la llamada ajax , tengo el código de un mapa de google maps , y no encuentro porque no se carga la pagina , hay que tener en cuenta algo para mostrar mapas ??

Hugo

23/7/2016
Una consulta, por si me pueden dar una mano.
Hola a todos.
Muchas gracias por esta instancia de aprendizaje, a quienes los realizan y a las otras personas que realizan preguntas, de las cuales también he aprendido.
Yendo directo al punto, el asunto es que realicé el ejercicio de este artículo y lo que no está funcionando es es no logra traer la página php invocada. El comportamiento que obtengo es el siguiente:
Después de hacer clic sobre el link, se despliega el mensaje del alert, pero no se despliegan los valores pasados como parámetros; ni siquiera se despliegan los label "nombre" ni "edad" que están en el php.
Estoy haciendo los ejercicios en mi computadora como localhost en un servidor web wampserver, donde los archivos los tengo en la carpeta WWW.
Estoy usando la última versión estable de jquery, la jquery-3.1.0.min.js
El archivo principal quedó como:
-----------------------------------------------------------------------------
<html>
<head>
<title>Ajax Simple</title>
<script src="jquery-3.1.0.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#enlaceajax").click(function(evento){
evento.preventDefault();
$("#destino").load("recibe-parametros.php", {nombre: "Pepe", edad: 45}, function(){
alert("recibidos los datos por ajax");
});
});
})
</script>
</head>
<body>
<a href="#" id="enlaceajax">Haz clic!</a>
<br>
<div id="destino">

</div>
</body>
</html>
-----------------------------------------------------------------------------
Y el archivo PHP invocado quedó como:
---------------------------------------------------------------------------------
Recibido el siguiente dato:
<br>
Nombre: <?php echo $_POST["nombre"];?>
<br>
Edad: <?php echo $_POST["edad"];?>
------------------------------------------------------------------------------------
En los ejercicios de los artículos anteriores, en donde invoco un html , sí se carga correctamente, pero con este PHP es que salta el problema.

Como el ejercicio lo ejecuto en Chrome, voy a la opción botón derecho-->Inspeccionar y luego ahí voy a la opción Console, aparece:
XMLHttpRequest cannot load file:///F:/wamp/www/recibe-parametros.php. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. jquery-3.1.0.min.js:4

send @ jquery-3.1.0.min.js:4
ajax @ jquery-3.1.0.min.js:4
r.fn.load @ jquery-3.1.0.min.js:4
(anonymous function) @ Pasar_parámetros_y_ejecutar_acciones_después_de_la_llamada_ajax.html:9
dispatch @ jquery-3.1.0.min.js:3
q.handle @ jquery-3.1.0.min.js:3

Si ejercicio los ejecuto bajo Firefox, al hacer clic al link se despliega:
Recibido el siguiente dato:
Nombre:
Edad:
No se despliegan los parámetros que se pasaron a la página.

Si ejecuto bajo IExplorer 11, no se carga el PHP en cuestión. El revisar con Inspeccionar, aparecen 1 error y 2 warning; el error no es especificado, pero que está en la línea 1 y uno de los warning indica : Se esperaba DOCTYPE. Considere agregar un doctype HTML5 válido: "<!DOCTYPE html>".

Espero que si alguien me puede orientar o ayudar a resolver el problema, le estaré muy agradecido; desde ya, muchas gracias y que tengan una buena tarde.
Hugo.

Hugo

23/7/2016
Un dato adicional a la consulta anterior
Hola a todos.
Con respecto de la consulta anterior que postee, les comento que llevé los archivos, el html y el php a un servidor web en internet y el ejercicio funcionó; sólo me quedó la duda que se invocó el php, pero primero apareció el alert con el mensaje y cuando le di cerrar a ese cuadro del alert, apareció la información pasada. Yo pensaba que primero se iba a mostrar la información pasada y el alert se despliega, pero en fin, lo importante es que el ejercicio funcionó. La duda con la que me quedo es por qué no se pudo desplegar en mi wampserver local. Si alguien tiene alguna idea del problema, se lo agradeceré que me lo comente.
Muchas gracias y que tengan buenas noches.
Hugo.

roy terrazas

17/10/2016
pregunta sobre parametros
Hola y en el caso de que quiera cargar variables en estos parametros:
{nombre: "Pepe", edad: 45}

como se hace? cual es la sintaxix, ejemplo en vez de poner "Pepe" quiero poner $Nombre y en vez de 45 $Edad

gracias quedo pendiente

Francisco

16/1/2017
jquey mobile
Buenos días, soy nuevo en jquery y estoy usando la versión para móviles, la cosa es que cuando utilizo . load o cualquier otro tipo para llamar a un html externo por un momento en el div en el que debe cargar me aparecen todos los botones y tal con los estilos que le he aplicado desde css en el html externo(los css son los mismos para los dos html y están importados en ambos html) la duda es que no se por que cuando hago clic por un segundo carga correcto los estilos y después cuando ya esta cargado en la clase html principal deja esos estilos y no pilla ninguno(aparecen los botones y demás pero por defecto. si me puedes decir a que es debido esto, muchas gracias por tu tiempo.

mico

02/2/2018
consulta
que pso