[Aporte] PermaLink en Ajax Con jQuery & PHP

gepd · #1 (**permalink**) 12/06/2009, 15:52

Visitantes de ForosDelWeb

Quiero compartir un pequeño script que he hecho para poder tener links permanentes cuando se trabaja con ajax y jQuery, éste mini script consta de una parte con php y otra javaScript.

Código PHP, éste debe colocarse al principio de la página donde se visualizará la información

Código PHP:

  <?php 
      $url = $_SERVER['REQUEST_URI'];
      $d = split("&",$url);
?>

Ahora el código JavaScript de jQuery

Código:

$(document).ready(function(){
     if(<?=$d[1];?> != ""){
          $.ajax({
                       url: "pagina.php?parametro1=<?=$d[1];?>&parameto2=<?=$d[2];?>",
                       success: function(datos){
                            $("#contenido").html(datos);    
                      },
                      type: "GET",
           });
       }
});

pagina.php donde se visualizará el contenido

Código HTML:

//Aquí el primer código 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>Inicio</title>
//aquí el código javascript de jQuery
</head>
<body>
<div id="contenido"></div>
</body>
</html>

¿Cómo funciona?

1. Luego de haber agregado los script y haber creado las páginas correspondientes, pasamos los parametros de ésta forma

www.dominio.com/pagina.php?=&datos1&datos2

Se puede agregar cuantos parametros se requieran.

2. Luego para recoger éstos valores desde la página php que procesará la información lo hacen con las variables GET de siempre.

Código PHP:

  $_GET['parametro1'];
$_GET['parametro2'];

3.Aquí es donde agregan los parametros para pasarlos via ajax, aquí es donde se pueden agregar o quitar cuantos parametros deseen además de poder modificar el código y hacer que el nombre de la página tambiens e pase por variable.

en ésta caso quedaría:
pagina.php?=&nombredelapaginaquequierolllamar&para metro1&parametro2

Código:

url: "<?=$d[1];?>.php?parametro1=<?=$d[2];?>&parameto2=<?=$d[3];?>",
pagina.php?=&otrapagina&parametro1&parametro2

Pueden Modificar el código a su antojo, si tienen alguna mejora, duda, etc, no duden en escribir

Saludos

enterweb · #2 (**permalink**) 12/06/2009, 17:26

Muchas gracias por el aporte.

Solo una objeción, cuando uses las etiquetas para comenzar con el código en php, usa siempre <?php ?> ya que no es la primera vez que me encuentro con servidores que no reconocen la etiqueta <? ?>.

Un saludo y gracias de nuevo.

gepd · #3 (**permalink**) 12/06/2009, 17:29

¿Lo dices por?: <?=$d[1];?>
si estoy equivocado me corrigen, pero creo que es la única forma para pasar variables mediante PHP a javascript.

saludos

miguec04 · #4 (**permalink**) 13/06/2009, 11:26

bien amigo si este es el codigo, jejejeje, pero una pregunta como hago para crean un link y ponerlo? en cualquier parte.

gepd · #5 (**permalink**) 13/06/2009, 16:05

miguec04 he modificado las instrucciones tratando de ser un poco mas claro, avisame si todavía te quedan dudas para poder ayudarte.

saludos

miguec04 · #6 (**permalink**) 15/06/2009, 22:03

amigo que pena por la ignorancia, sera que ud puede poner un codigo de ejemplo, osea una pagina como se utiliza, ojala poniendo varios codigos, muchas gracias que pena por la molestia.

jaskel · #7 (**permalink**) 16/06/2009, 02:24

Cita:

Iniciado por gepd

¿Lo dices por?: <?=$d[1];?>
si estoy equivocado me corrigen, pero creo que es la única forma para pasar variables mediante PHP a javascript.

saludos

<?=$d[1];?> es equivalente a <?php echo $d[1];?> pero para que funcione en php5 necesitas tener habilitado en el php.ini short_open_tag = on, la jodía retrocompatibilidad.

Así que para evitar problemas y hacer un buen codigo usemos <?php echo $d[1];?>

miguec04 · #8 (**permalink**) 16/06/2009, 10:02

mmmm osea que pena, es que no se como va osea con el codigo ajax jquery que hay ya es sufficiente????? por ejemplo como pondria un menu??? varios link?? el link como iria? <a hrf="como_iriar_el_link???">Texto de ayuda</a>

gepd · #9 (**permalink**) 16/06/2009, 11:33

Fijate en éste código de ejemplo:

Código PHP:

 
//Este còdigo procesa la URL

<?php 

      $url = $_SERVER['REQUEST_URI'];

      $d = split("&",$url);

?> 

<!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>Inicio</title>

 
// RECUERDA QUE AQUÍ FALTA EL ENLACE A LA LIBRERIA jQuery

 
$(document).ready(function(){

   if(<?php echo $d[1]; ?> != ""){

       $.ajax({

               url: "<?php echo $d[1];?>.php?parametro1=<?php echo $d[2];?>",

               success: function(datos){

                   $("#contenido").html(datos);    

               },

               type: "GET",

        });

    }

});

</head>

<body>

<div id="contenido" style="width:30px;height:300px"></div>

<a href="?=&pagina_que_se_dese_amostrar&datos_de_parametro1">Link</a>

</body>

</html>

Las dos partes más importantes del código son:

Código PHP:

 
url: "<?php echo $d[1];?>.php?parametro1=<?php echo $d[2];?>",

Ésta Linea la he modificado para enviarle el nombre de la página como parametro.

El link quedaría de ésta forma:

www.tupagina.com/pagina_que_muestra_código.php?=&pagina_que deseo_mostrar_en_div&otra_info
- Éste parametro es donde indicas que página o info quieres cargar en el div
- Éstos parametros adicionales son los quieres que lleguen a la página cuando se hace la llamada Ajax

Puedes agregar cuantos quieras añandiendo un & mas la info
en donde luego le agregas el nombre de la variable

Luego en:

url: "<?php echo $d[1];?>.php?parametro1=<?php echo $d[2];?>&nuevo_parametro=<?php echo $d[3];?>",

Agregas cuantos parametros desees, luego a la página que se llama se reciben los parametros con la variable $_GET

Ejemplo:

Código PHP:

  $variable1 = $_GET['parametro1'];

$variable2 = $_GET['nuevo_parametro'];

Espero que ahora halla quedado todo un poco más claro de todas formas si no entiendes no dudes en consultar.

Saludos

miguec04 · #10 (**permalink**) 16/06/2009, 23:52

perdon por lo torpe que soy pero no he podido hize lo siuiente no se si me puedes corregir

<?php
$url = $_SERVER['REQUEST_URI'];
$d = split("&",$url);
?>
<!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>Inicio</title>

<script language="javascript">

$(document).ready(function(){
if(<?php echo $d[1]; ?> != ""){
$.ajax({
url: "<?php echo $d[1];?>.php?parametro1=<?php echo $d[2];?>",
success: function(datos){
$("#contenido").html(datos);
},
type: "GET",
});
}
});
</script>
</head>
<body>
<div id="contenido" style="width:30px;height:300px"></div>
<a href="?=&pagina.php&parametro1=1">Link</a>
</body>
</html>

eso no no me funciona soy un torpe ayudame es que no entiendo muchas gracias mi correo es [email protected] te agradezco de corazon.

gepd · #11 (**permalink**) 19/06/2009, 21:16

te dejo otro ejemplo para que entiendas ejecuta esas páginas y luego revisa lo que he hecho

index.html

Código:

<?php
		$url = $_SERVER['REQUEST_URI'];
	  	$d = split("&",$url);
?>
<!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>Index</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
	if('<?=$d[1];?>' != ""){
		$.ajax({
			 	url: "<?=$d[1];?>.php?texto1=<?=$d[2];?>&texto2=<?=$d[3];?>",
				async: false,
				dataType: "html",
				success: function(datos){
					$("#contenido").html(datos);	
				},
				type: "GET",
		});
	}
});
</script>
</head>
<body>
contenido cargado: 
<div id="contenido"> texto inicial de div <b>contenido</b> </div>
<a href="?=&otra_pagina&variabletexto1&variabletexto2">cargar contenido pagina 1</a>
<a href="?=&otra_pagina2&variabletexto1&variabletexto2">cargar contenido pagina 2</a>
</body>
</html>

otra_pagina.php

Código:

<!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>otra pagina</title>
</head>
<body>
soy otra_pagina.php<br /><br />
<?php echo $_GET['texto1']; ?><br />
<?php echo $_GET['texto2']; ?>
</body>
</html>

otra_pagina2.php

Código:

<!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>otra pagina 2</title>
</head>
<body>
soy otra_pagina2.php<br /><br />
<?php echo $_GET['texto1']; ?><br />
<?php echo $_GET['texto2']; ?>
</body>
</html>

Saludos!