Dudas JQUERY y AJAX

neodani · #1 (**permalink**) 15/03/2010, 16:22

Buenas,

Tengo dudas sobre la utilización de JQUERY y sus funciones AJAX, he estado leyendo varias paginas que hablan del tema pero no consigo aclararme
http://librosweb.es/ajax/capitulo10/...ia_jquery.html

Tengo los siguientes 3 archivos

principal.php

Código PHP:

Ver original<!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>Probando JQUERY y Ajax</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">      
    $.ajax({
      url: 'pagina.php',
      type: 'POST',
      async: true,
      data: 'parametro1=valor1&parametro2=valor2',
      success: procesaRespuesta,
      error: muestraError
    });
    
    // Petición GET con envío de parámetros y función que
    // procesa la respuesta
    $.get('pagina.php',
      { articulo: '34' },
      function(datos) {
        alert('Respuesta = '+datos);
      });
</script>
</head>
 
<body>
<div id="info"></div>
 
<script type="text/javascript"> 
    //La función $.load() inserta el contenido de la respuesta del servidor en el elemento de la página que se indica.
    $('#info').load('informacion.php');
</script>
 
</body>
</html>

pagina.php

Código:

dato1
dato2
dato3
dato4

informacion.php

Código:

Aquí la información!

Me he dado cuenta que si quiero que se muestre el contenido de un fichero ej. lineas de la 30 a la 33 debe estar por debajo de la linea 28.

Pero lo que quiero conseguir en jquery, es lo siguiente:

Desde la página principal, el usuario pulsa sobre un boton o texto, esto hace que se envíe una variable, por ejemplo muestra=todo, a una página "ajax.php", esta página recibe la variable y devuelve la respuesta a la página principal en formato Json. (Entiendo que la pagina ajax.php tiene que ser la encargada de generar ese json no?)

Cómo hago ese proceso con JQUERY? me podéis guiar un poco? entiendo que no debe ser dificil xD

Sin utilizar JQUERY "parte" del proceso sería así

Código PHP:

Ver original<html>
  <head>
  <title>Obteniendo datos con AJAX sin recargar pagina</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<script language="javascript"  type="text/javascript">
var RequestObject = false; 
  var Archivo = 'datos_ajax.php'; //directorio donde tenemos el archivo ajax.php 
  window.setInterval("actualizacion_reloj()", 5000); // el tiempo X que tardará en actualizarse 
  if (window.XMLHttpRequest) // 
RequestObject = new XMLHttpRequest();
if (window.ActiveXObject)   
  RequestObject = new ActiveXObject("Microsoft.XMLHTTP");
function ReqChange() {
// Si se ha recibido la información correctamente
  if (RequestObject.readyState==4) {
  // si la información es válida 
      if (RequestObject.responseText.indexOf('invalid') == -1) 
      { 
      // obtener la respuesta 
      var msgs = RequestObject.responseText.split('|');
      // Buscamos la div con id online 
      document.getElementById("tabla1").innerHTML = msgs[0];
      }
      else {
      // Por si hay algun error 
      document.getElementById("tabla1").innerHTML = "Error llamando";
      }
  }
}
function llamadaAjax() {
 // Mensaje a mostrar mientras se obtiene la información remota...
  //document.getElementById("tabla1").innerHTML = "";
  // Preparamos la obtención de datos 
  RequestObject.open("GET", Archivo , true);
  RequestObject.onreadystatechange = ReqChange;
  // Enviamos 
  RequestObject.send(null); 
  }
  function actualizacion_reloj() {
    llamadaAjax();
  }
</script>
<body onload="llamadaAjax();">
<h2>Obteniendo datos con AJAX sin recargar pagina </h2>
  <div id="tabla1"></div>
</body>
</html>

Muchas gracias de antemano!

mayid · #2 (**permalink**) 15/03/2010, 16:35

Cita:

Me he dado cuenta que si quiero que se muestre el contenido de un fichero ej. lineas de la 30 a la 33 debe estar por debajo de la linea 28.

En realidad, tendrías que pensar seriamente en usar document.ready , porque modificar el DOM antes de que termine de cargar es un problema.

Es decir, coloca todos tus scripts en <head> y utiliza document.ready.

Cita:

Desde la página principal, el usuario pulsa sobre un boton o texto, esto hace que se envíe una variable, por ejemplo muestra=todo, a una página "ajax.php", esta página recibe la variable y devuelve la respuesta a la página principal en formato Json. (Entiendo que la pagina ajax.php tiene que ser la encargada de generar ese json no?)

Lo optimo para vos se llama $.getjson()
http://api.jquery.com/jQuery.getJSON/

POdes enviar variables GEt o POST segun te parezca, y la estructura basica es esta:

Cita:

$.getJSON('ajax/test.json', function(data) {

$('.result').html('<p>' + data.foo + '</p>'
+ '<p>' + data.baz[1] + '</p>');

});

La funcion anonima es el momento de procesar la respuesta json.

Dany_s · #3 (**permalink**) 15/03/2010, 16:39

Cita:

Me he dado cuenta que si quiero que se muestre el contenido de un fichero ej. lineas de la 30 a la 33 debe estar por debajo de la linea 28.

no entendi eso

neodani · #4 (**permalink**) 15/03/2010, 16:48

Cita:

Iniciado por mayid

En realidad, tendrías que pensar seriamente en usar document.ready , porque modificar el DOM antes de que termine de cargar es un problema.

Es decir, coloca todos tus scripts en <head> y utiliza document.ready.

Lo intenté así mayid, pero creo que no es así.. :S

Código PHP:

Ver original<!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>Probando JQUERY y Ajax</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">      
    $.ajax({
      url: 'pagina.php',
      type: 'POST',
      async: true,
      data: 'parametro1=valor1&parametro2=valor2',
      success: procesaRespuesta,
      error: muestraError
    });
    
    // Petición GET con envío de parámetros y función que
    // procesa la respuesta
    $.get('pagina.php',
      { articulo: '34' },
      function(datos) {
        alert('Respuesta = '+datos);
      });
 
      
      $(document).ready(function() {
        // put all your jQuery goodness in here.
        //La función $.load() inserta el contenido de la respuesta del servidor en el elemento de la página que se indica.
        $('#info').load('informacion.php');   
      });
 
 
</script>
</head>
 
<body>
<div id="info"></div>
 
</body>
</html>

Cita:

Iniciado por mayid

Lo optimo para vos se llama $.getjson()
http://api.jquery.com/jQuery.getJSON/

POdes enviar variables GEt o POST segun te parezca, y la estructura basica es esta:

La funcion anonima es el momento de procesar la respuesta json.

¿Es necesaria esta parte en todos los scripts ajax con jquery?

Código Javascript:

Ver original$.ajax({
      url: 'pagina.php',
      type: 'POST',
      async: true,
      data: 'parametro1=valor1&parametro2=valor2',
      success: procesaRespuesta,
      error: muestraError
    });

En este caso si lo que quiero recibir es un JSON ¿debería cambiarlo por algo similar a esto?

Código Javascript:

Ver original$.ajax({
  url: 'pagina.php',
  dataType: 'json',
  data: 'parametro1=valor1&parametro2=valor2',
  success: procesaRespuesta,
});

¿Esta última declaración sirve tanto para enviar como para recibir?

Muchas gracias de antemano!

mayid · #5 (**permalink**) 15/03/2010, 17:09

Cita:

Iniciado por Dany_s

no entendi eso

Dany, el se refería a las lineas numeradas que surgieron al publicar el codigo en forosdelweb. Son estas:

Cita:

mayid · #6 (**permalink**) 15/03/2010, 17:13

Cita:

En este caso si lo que quiero recibir es un JSON ¿debería cambiarlo por algo similar a esto?

POdes usar perfectamente eso. Lo que yo te propuse fue una sintaxis alternativa, especifica y condensada de lo mismo. SI te fijas, lo dice en el link que te dejé.

Cita:

¿Esta última declaración sirve tanto para enviar como para recibir?

Usando la estructura que publicaste, fijate que la linea "data" declara las variables a enviar, sean post o GET. En cuanto recibir, lo hacés desde la linea "success". Por ejemplo:

Cita:

$.ajax({
url: 'pagina.php',
type: 'POST',
async: true,
data: 'parametro1=valor1&parametro2=valor2',
success: function(data) {
// aqui se recibe la respuesta de php, en format json. Lo que obtenes es un array u objeto.

alert (data.loquesea);
}

});

neodani · #7 (**permalink**) 16/03/2010, 00:57

Muchas gracias mayid,

Sabéis porque esto no funciona? lineas de la 26 a la 30 (post anterior)

Código Javascript:

Ver original$(document).ready(function() {
 
        // put all your jQuery goodness in here.
 
        //La función $.load() inserta el contenido de la respuesta del servidor en el elemento de la página que se indica.
 
        $('#info').load('informacion.php');  
      });

Esta parte lo he solucionado

Código Javascript:

Ver original$(document).ready(function() {
        $("#info").ready(function(event){
            $('#info').load('informacion.php')
        };  
      });

También me gustaría saber, si de esta forma estoy enviando a la pagina.php esas variables (parametro1=valor1&parametro2=valor2)

$.ajax({
url: 'pagina.php',
type: 'POST',
async: true,
data: 'parametro1=valor1&parametro2=valor2',
success: procesaRespuesta,
error: muestraError
});

Cómo lo tengo que hacer para recibir esas variables en la pagina.php, lo intenté poniendo dentro de pagina.php este codigo php para printar el array POST

<?
print_r($_POST);
?>

Pero no me escribió nada, y claro no se si hay que hacerlo de una forma distinta, que estoy haciendo mal? :S:S

Muchas gracias de antemano!

mayid · #8 (**permalink**) 16/03/2010, 07:55

Mira, son varias cosas. Viendo tu codigo y leyendo tus comentarios veo que no estás muy seguro de lo que escribiste. Fijate: tenes declarada una llamada a una función, pero esa función no existe. O al menos no la publicaste!:

success: procesaRespuesta,

Por regla general, tenes que usar un debugger para detectar este tipo de problemas (puede ser el Firebug de FIrefox.), que cortan el flujo del programa. O al menos, tendrías que fijarte si IE no te marca un error de javascript. Lo estas haciendo? Me parece que si, pero no estoy del todo seguro.

Respecto a PHP, mis pruebas suelen ser simple: echo $_POST["variable"];
Quiero decir, no imprimo el array entero. Probalo.

No se si con esto te resulevo algo, pero en sintesis lo que quise decir es que el problema muy probablemente esté en un cable suelto del lado cliente, como el de la funcion inexistente. Solucinoando eso, el lado servidor va a funcionar bien. :)

neodani · #9 (**permalink**) 16/03/2010, 16:48

Cita:

Iniciado por mayid

Mira, son varias cosas. Viendo tu codigo y leyendo tus comentarios veo que no estás muy seguro de lo que escribiste. Fijate: tenes declarada una llamada a una función, pero esa función no existe. O al menos no la publicaste!:

success: procesaRespuesta,

Por regla general, tenes que usar un debugger para detectar este tipo de problemas (puede ser el Firebug de FIrefox.), que cortan el flujo del programa. O al menos, tendrías que fijarte si IE no te marca un error de javascript. Lo estas haciendo? Me parece que si, pero no estoy del todo seguro.

Respecto a PHP, mis pruebas suelen ser simple: echo $_POST["variable"];
Quiero decir, no imprimo el array entero. Probalo.

No se si con esto te resulevo algo, pero en sintesis lo que quise decir es que el problema muy probablemente esté en un cable suelto del lado cliente, como el de la funcion inexistente. Solucinoando eso, el lado servidor va a funcionar bien. :)

Buenas,

Muchas gracias por tus consejos, me han venido muy bien!

Como puedo hacer para realizar las peticiones de forma periodica cada X segundos?

Ahora mismo tengo lo siguiente:

Código HTML:

Ver original<!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>Probando JQUERY y Ajax</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">      
    $.ajax({
      url: 'pagina.php',
      type: 'GET',
      async: true,
      //data: 'parametro1=valor1&parametro2=valor2',
      data: 'parametro1=1',
      //success: procesaRespuesta,
      success: Recibir_Datos
      //error: muestraError
    });
 
function Recibir_Datos (data){
    // Cuando recibimos la respuesta convertimos esa respuesta
    // en html y visualizamos esa respuesta en el div
    // con id "#info" que teníamos oculto en la página HTML
    $("#info").html(data);
    $("#info").show();
}
</script>
</head>
 
<body>
<div id="info"></div>
 
</body>
</html>

pagina.php

Código PHP:

Ver original<?
if ($_GET['parametro1']==1){
    echo "Opcion 1 recibida";
}else{
    echo "Opción invalida";
}
?>

¿Sabéis qué modificaciones tengo que hacer con JQUERY?

Muchas gracias de antemano!

mayid · #10 (**permalink**) 16/03/2010, 16:57

Momento. Te falta usar document.ready, que es casi un equivalente que el onLoad de javascript.

Cita:

$(document).ready(function(){

$.ajax({
url: 'pagina.php',
type: 'GET',
async: true,

data: 'parametro1=1',

success: Recibir_Datos

});

})

Por ahí este articulo te sirva: http://www.desarrolloweb.com/articul...ar-jquery.html

REspecto a repetir la función, creo que podes usar setInterval(). No se si jquery tenga algo de eso también.

nota: una vez compruebes que todo funciona, acrodate de declarar dataType: 'json', así recibis una respuesta que puedas parsear como un array javascript.

neodani · #11 (**permalink**) 16/03/2010, 17:20

Cita:

Iniciado por mayid

Momento. Te falta usar document.ready, que es casi un equivalente que el onLoad de javascript.

Por ahí este articulo te sirva: http://www.desarrolloweb.com/articul...ar-jquery.html

REspecto a repetir la función, creo que podes usar setInterval(). No se si jquery tenga algo de eso también.

nota: una vez compruebes que todo funciona, acrodate de declarar dataType: 'json', así recibis una respuesta que puedas parsear como un array javascript.

Buenas,

Es decir, que es bueno englobar todo el código dentro de la función

$(document).ready(function(){

}

siempre y cuando "se tenga que cargar al acceder a la pagina", no?

Respecto a la función de repetir, lo he conseguido con lo siguiente:

Código Javascript:

Ver originalvar vfresh = function()
{
   $.ajax({
      url: 'pagina.php',
      type: 'GET',
      async: true,
      //data: 'parametro1=valor1&parametro2=valor2',
      data: 'parametro1=1',
      success: Recibir_Datos
      //error: muestraError
    });
}
setInterval(vfresh, 10000);

Pero me pasa algo curioso, si lo englobo dentro de la función que me dices no me muestra nada hasta pasado el intervalo inicial, cosa que antes sin incluirle el
$(document).ready(function(){
Hacia bien, me mostraba el contenido y luego actualizaba.... ahora no

Código Javascript:

Ver original<script type="text/javascript">      
 
$(document).ready(function(){
    var vfresh = function()
    {
       $.ajax({
          url: 'pagina.php',
          type: 'GET',
          async: true,
          //data: 'parametro1=valor1&parametro2=valor2',
          data: 'parametro1=1',
          success: Recibir_Datos
          //error: muestraError
        });
    }
    setInterval(vfresh, 5000);
});
 
function Recibir_Datos (data){
    // Cuando recibimos la respuesta convertimos esa respuesta
    // en html y visualizamos esa respuesta en el div
    // con id "#info" que teníamos oculto en la página HTML
    $("#info").html(data);
    $("#info").show();
}
 
</script>

... Puedes indicarme que hago mal?

Muchas gracias de antemano!

juaniquillo · #12 (**permalink**) 16/03/2010, 18:02

si quieres que se haga el refresh al principio también me imagino que necesitas llamar la función sola. Después el setInterval se encargará de llamar la función las otras veces:

Código Javascript:

Ver original$(document).ready(function(){
    var vfresh = function()
    {
       $.ajax({
          url: 'pagina.php',
          type: 'GET',
          async: true,
          //data: 'parametro1=valor1&parametro2=valor2',
          data: 'parametro1=1',
          success: Recibir_Datos
          //error: muestraError
        });
    }
   
   vfresh();
   setInterval(vfresh, 5000);
   
});

mayid · #13 (**permalink**) 16/03/2010, 18:06

No es que estes haciendo algo mal necesariamente. Es que no comprendiste el uso de document.ready.

Cita:

siempre y cuando "se tenga que cargar al acceder a la pagina", no?

Lo que hace la función es dispararse recién en una segunda lectura de la pagina. No es la primera. Lo cual es útil porque a la primera los elementos del <body> todavía no existen. Por ende, no podría modificar $("#info") porque todavía no existe!

Lo que pasa ahora es que al cargar la pagina se lee el codigo. Se declara la funcion vfresh. Y luego se dice "cada 10 segundos, ejecutala".

Distinto sería si escribieras:

Cita:

var vfresh = function()
{
$.ajax({
url: 'pagina.php',
type: 'GET',
async: true,
//data: 'parametro1=valor1&parametro2=valor2',
data: 'parametro1=1',
success: Recibir_Datos
//error: muestraError
});
}
vfresh();
setInterval(vfresh, 5000);

... porque ahí la ejecutarías por primera vez... y luego le propondrías un intervalo de 10secs.

Eh! Juaniquillo. Lo escribiste antes que yo :)

juaniquillo · #14 (**permalink**) 16/03/2010, 18:09

ja, te gané por 4 minutos..

neodani · #15 (**permalink**) 17/03/2010, 00:41

Cita:

Iniciado por mayid

Lo que hace la función es dispararse recién en una segunda lectura de la pagina. No es la primera. Lo cual es útil porque a la primera los elementos del <body> todavía no existen. Por ende, no podría modificar $("#info") porque todavía no existe!

Muchas gracias mayid y juaniquillo!