Foros del Web - Ver Mensaje Individual

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!