Foros del Web » Programando para Internet » Javascript » Frameworks JS »

recuperar valor por $_get sin recargar pagina

Estas en el tema de recuperar valor por $_get sin recargar pagina en el foro de Frameworks JS en Foros del Web. Hola bueno tengo una select donde muestro las options segun los datos de mi base de datos, hasta aqui bien. Lo que pasa que utilizo ...
  #1 (permalink)  
Antiguo 13/08/2011, 05:49
 
Fecha de Ingreso: mayo-2011
Mensajes: 1.201
Antigüedad: 13 años, 6 meses
Puntos: 10
recuperar valor por $_get sin recargar pagina

Hola bueno tengo una select donde muestro las options segun los datos de mi base de datos, hasta aqui bien. Lo que pasa que utilizo el evento onchange= "document.form[1].submit()" para recuperar el valor por $_get, de esta forma tengo problemas porque recargo la pagina y esto es lo que no quiero.

Entonces lo que quiero es recuperar el valor del select pero sin recargar la pagina osea utilizando ajax para pedir peticiones y recuperar el valor del select.

Pero claro no se como hacer esta parte de recuperar el valor sin recargar la pagina alguna ayuda?

Saludos.
  #2 (permalink)  
Antiguo 13/08/2011, 06:31
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 7 meses
Puntos: 1284
Respuesta: recuperar valor por $_get sin recargar pagina

Hola:

Un par de cosillas... "$.get" no es Ajax... tal vez se trate de alguna librería, y eso se debe especificar.
Luego document.form[1] me suena que está mal... tal vez se trate de document.forms...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 13/08/2011, 07:04
 
Fecha de Ingreso: mayo-2011
Mensajes: 1.201
Antigüedad: 13 años, 6 meses
Puntos: 10
Respuesta: recuperar valor por $_get sin recargar pagina

Tienes razon caricatos pero en fin yo lo que quiero es a traves de un select recuperar el valor de la opcion elejida a traves de por $_GET sin recargar la pagina con el evento onchange.

Esto creo que es posible con Ajax pero no se los pasos que tengo que seguir, me puedes orientar?

Saludos.
  #4 (permalink)  
Antiguo 13/08/2011, 12:11
 
Fecha de Ingreso: enero-2009
Ubicación: San Lorenzo - Paraguay
Mensajes: 36
Antigüedad: 15 años, 9 meses
Puntos: 6
Respuesta: recuperar valor por $_get sin recargar pagina

Hola pithon, mira si te sirve esto que lo hice ahora. Necesitaras descargar jQuery [URL="http://code.jquery.com/jquery-1.6.2.min.js"]http://code.jquery.com/jquery-1.6.2.min.js[/URL], te dejo este codigo:

index.html
Código HTML:
Ver original
  1. <script type="text/javascript" src="jquery-1.6.2.min.js" /></script>
  2. $(document).ready(function(){  
  3.     $("#formulario").submit(function(){
  4.         var opcion = $("#opcion").val().replace('opcion ','');
  5.         $("#mensaje").html("Procesando");
  6.             $.post("verificar.php?opcion="+opcion, {}, function(datos){
  7.                 $("#datos").html(datos);
  8.                 //$("#formulario").hide();
  9.             });
  10.     });
  11. });
  12. </head>
  13.     <form id='formulario' action='javascript:void(0);' method='GET'>
  14.         <span id='mensaje'></span>
  15.         <table>
  16.             <tr>
  17.                 <td><label>Seleccionar:</label></td>
  18.                 <td>
  19.                     <select id='opcion'>
  20.                         <option id='op'>opcion 1</option>
  21.                         <option id='op'>opcion 2</option>
  22.                         <option id='op'>opcion 3</option>
  23.                         <option id='op'>opcion 4</option>
  24.                     </select>
  25.                 </td>
  26.             </tr>
  27.             <tr>
  28.                 <td><input type='submit' id='enviar' value='Enviar' /></td>
  29.             </tr>
  30.         </table>
  31.     </form>
  32.    
  33.     <div id='datos'></div>
  34. </body>
  35. </html>

verificar.php
Código PHP:
<?php

    $opcion 
$_GET['opcion'];    

    if(
$opcion){
        if(
$opcion == 1){
            echo 
"Datos opcion 1";
        }elseif(
$opcion == 2){
            echo 
"Datos opcion 2";
        }elseif(
$opcion == 3){
            echo 
"Datos opcion 3";
        }elseif(
$opcion == 4){
            echo 
"Datos opcion 4";
        }
    }
        
?>
Espero te sirva... Saludos!!
  #5 (permalink)  
Antiguo 13/08/2011, 18:40
 
Fecha de Ingreso: mayo-2011
Mensajes: 1.201
Antigüedad: 13 años, 6 meses
Puntos: 10
Respuesta: recuperar valor por $_get sin recargar pagina

Xilsh gracias pero yo realmente no quiero utilizar jQuery, ya que estoy en proceso de aprendizaje y como no es un codigo muy largo quiero saber hacerlo.

Aunque la verdad que si es esto lo que quiero lograr pero claro sin jQuery, aunque en el codigo que posteastes como tendria que ser para que no tuviera boton de envio osea que al pulsar la opcion muestre los datos, esto se puede?

Realmente es un codigo complicado este que posteastes pero sin jQuery?

Saludos.

Última edición por pithon; 13/08/2011 a las 19:03
  #6 (permalink)  
Antiguo 13/08/2011, 20:12
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 7 meses
Puntos: 1284
Respuesta: recuperar valor por $_get sin recargar pagina

Hola:

No es necesario Ajax para obtener un dato de un select, porque para hacer la llamada ya debes saber obtenerlo.. por ejemplo con onchange="alert(this.value)"... pero entiendo que quieres saber cómo hacerlo, así que mejor te lo intento explicar.

Una forma (la que yo uso) de crear objetos ajax es con esta función:

Código:
function objetoAjax()	{
	if (window.XMLHttpRequest)
		_ajax = new XMLHttpRequest();
	else
		if (window.ActiveXObject)
			_ajax = new ActiveXObject("Microsoft.XMLHTTP");
		else
			_ajax = false;
	return _ajax;
}
Tienes que tener un fichero en el servidor que reciba la petición ajax y normalmente devuelve resultados (por eso se suele denominar "petición". Pueden devolverse los datos requeridos de forma estructurada con estructura xml o json, o simplemente texto plano que parece ser lo que quieres conseguir. Supongo que si solo te interesa saber lo que envías, bastaría con un ficherito php tal que:

Código:
<?php
echo $_GET["opcion"];
?>
Solo nos queda la misma petición. Suponiendo que el fichero php se llame "ir.php", la llamada sería: onchange="pedir(this.value)"; y pedir.php sería:

Código:
function pedir(dato) {
 Ajax = objetoAjax();
 Ajax.open("get", "ir.php?opcion=" + dato, true);
 Ajax.onreadystatechange = function() {
  if (Ajax.readyState == 4 && (Ajax.status == 200 || Ajax.status == 501))
   alert(Ajax.responseText);
 }
 Ajax.send(null);
}
Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #7 (permalink)  
Antiguo 14/08/2011, 03:05
 
Fecha de Ingreso: mayo-2011
Mensajes: 1.201
Antigüedad: 13 años, 6 meses
Puntos: 10
Respuesta: recuperar valor por $_get sin recargar pagina

caricatos gracias por tu explicacion ahora creo que entendi el concepto, ahora no tengo tiempo pero esta tarde lo intento aplicar a la practica y te comentare que tal me fue un saludo y gracias maestro.
  #8 (permalink)  
Antiguo 14/08/2011, 08:10
 
Fecha de Ingreso: enero-2009
Ubicación: San Lorenzo - Paraguay
Mensajes: 36
Antigüedad: 15 años, 9 meses
Puntos: 6
Respuesta: recuperar valor por $_get sin recargar pagina

Cita:
Iniciado por pithon Ver Mensaje
Xilsh gracias pero yo realmente no quiero utilizar jQuery, ya que estoy en proceso de aprendizaje y como no es un codigo muy largo quiero saber hacerlo.

Aunque la verdad que si es esto lo que quiero lograr pero claro sin jQuery, aunque en el codigo que posteastes como tendria que ser para que no tuviera boton de envio osea que al pulsar la opcion muestre los datos, esto se puede?

Realmente es un codigo complicado este que posteastes pero sin jQuery?

Saludos.
Sin el boton de envío sería así.

Código HTML:
Ver original
  1. <script type="text/javascript" src="jquery-1.6.2.min.js" /></script>
  2. $(document).ready(function(){  
  3.     $("#opcion").change(function(){
  4.         var opcion = $("#opcion").val().replace('opcion ','');
  5.         $("#mensaje").html("Procesando");
  6.             $.post("verificar.php?opcion="+opcion, {}, function(datos){
  7.                 $("#datos").html(datos);
  8.                 $("#mensaje").html("Listo");
  9.             });
  10.     });
  11. });
  12. </head>
  13.     <span id='mensaje'></span>
  14.         <table>
  15.             <tr>
  16.                 <td><label>Seleccionar:</label></td>
  17.                 <td>
  18.                     <select id='opcion'>
  19.                         <option id='op'>opcion 1</option>
  20.                         <option id='op'>opcion 2</option>
  21.                         <option id='op'>opcion 3</option>
  22.                         <option id='op'>opcion 4</option>
  23.                     </select>
  24.                 </td>
  25.             </tr>
  26.         </table>
  27.     <div id='datos'></div>
  28. </body>
  29. </html>
  #9 (permalink)  
Antiguo 14/08/2011, 09:19
 
Fecha de Ingreso: mayo-2011
Mensajes: 1.201
Antigüedad: 13 años, 6 meses
Puntos: 10
Respuesta: recuperar valor por $_get sin recargar pagina

Xilsh gracias por tu colaboracion va muy bien tu codigo gracias por enseñarme esta ventaja que nos da jQuery.

Referente a no usar jQuery caricatos tengo una duda, no se que hice mal pero cuando seleciono una opcion me aparece un alert, enseñandome todo la pagina, con las etiquetas incluidas no se que hice mal.
Lo quise hacer con dos select y quise que cada valor fuera independiente, osea que se pudiera cambiar el valor del primer select o solo el del segundo select sin reflescar la pagina, pero no me funciono puse el formulario en el mismo script que puse los datos que queria recuperar con $_GET, no se si era la manera correcta de hacerlo ya que yo quiero que muestre el valor de $_GET debajo de los select.

muestro codigo por si me quieres correguir:

ir.php

Código PHP:
Ver original
  1. <html>
  2. <head>
  3.     <script type="text/javascript" src="funciones.js"></script>
  4. </head>
  5. <body>
  6. <form name="form" method="get">
  7. <select name="una"  onchange="pedir(this.value);">
  8.    <option value=0>seleciona </option>
  9.    <option value="1">noticias</option>
  10.    <option value="2">articulos</option>
  11.    <option value="3">otros</option>
  12. </select>
  13. <select name="dos" onchange="pedir(this.value);" >
  14.    <option value=0>seleciona</option>
  15.    <option value="1">primero</option>
  16.    <option value="2">segundo</option>
  17.    <option value="3">tercero</option>
  18. </select>
  19.  
  20. </form>
  21. <?php
  22. if ( isset($_GET['una']) and $_GET['una']==1){
  23. echo $_GET['una'];
  24. }
  25. if ( isset($_GET['una']) and $_GET['una']==2){
  26. echo $_GET['una'];
  27. }
  28. if ( isset($_GET['una']) and $_GET['una']==3){
  29. echo $_GET['una'];
  30. }
  31. if ( isset($_GET['dos']) and $_GET['dos']==1){
  32. echo $_GET['dos'];
  33. }
  34. if ( isset($_GET['dos']) and $_GET['dos']==2){
  35. echo $_GET['dos'];
  36. }
  37. if ( isset($_GET['dos']) and $_GET['dos']==3){
  38. echo $_GET['dos'];
  39. }
  40. ?>
  41.  
  42. </body>
  43. </html>

funciones:

Código Javascript:
Ver original
  1. //crear un objeto con ajax
  2.  
  3. function objetoAjax()   {
  4.     if (window.XMLHttpRequest)
  5.         _ajax = new XMLHttpRequest();
  6.     else
  7.         if (window.ActiveXObject)
  8.             _ajax = new ActiveXObject("Microsoft.XMLHTTP");
  9.         else
  10.             _ajax = false;
  11.     return _ajax;
  12. }
  13.  
  14. //hacer la peticion para recuperar datos
  15.  
  16. function pedir(dato) {
  17.  Ajax = objetoAjax();
  18.  Ajax.open("get", "ir.php?una=" + dato, true);
  19.  Ajax.open("get", "ir.php?dos=" + dato, true);
  20.  Ajax.onreadystatechange = function() {
  21.   if (Ajax.readyState == 4 && (Ajax.status == 200 || Ajax.status == 501))
  22.    alert(Ajax.responseText);
  23.  }
  24.  Ajax.send(null);
  25. }


Saludos.

Última edición por pithon; 14/08/2011 a las 09:39
  #10 (permalink)  
Antiguo 14/08/2011, 10:01
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 7 meses
Puntos: 1284
Respuesta: recuperar valor por $_get sin recargar pagina

Hola:

La página que usas con Ajax no tiene que ser la misma que la que devuelve la respuesta... y has puesto una complejidad añadida con el segundo select, y hay unas comparaciones que no creo necesarias. ir php debe ir con las pocas líneas que puse (al menos has las primeras pruebas así); y la página del formulario debería ser otra (tal vez prueba.html)

Con respecto al otro código, no se debe repetir el atributo id nunca.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #11 (permalink)  
Antiguo 14/08/2011, 10:35
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 7 meses
Puntos: 1284
Respuesta: recuperar valor por $_get sin recargar pagina

Hola:

Por cierto, se me pasó que solo debes usar open una vez... si quieres diferenciar algo debes hacerlo antes...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #12 (permalink)  
Antiguo 14/08/2011, 10:37
 
Fecha de Ingreso: enero-2009
Ubicación: San Lorenzo - Paraguay
Mensajes: 36
Antigüedad: 15 años, 9 meses
Puntos: 6
Respuesta: recuperar valor por $_get sin recargar pagina

Gracias caricatos la razón es que iba a utilizar llamando por atributos id de <option> op_1, op_2, etc. Pero lo hice directo con el valor deje el atributo id porque esta en desuso y a modo de ejemplificar de manera que no afectaría en este caso.
  #13 (permalink)  
Antiguo 14/08/2011, 10:46
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 7 meses
Puntos: 1284
Respuesta: recuperar valor por $_get sin recargar pagina

Cita:
Iniciado por Xilsh Ver Mensaje
...deje el atributo id porque esta en desuso...
No sé si quieres decir eso, pero el id sigue muy vivo. En tag options no le encuentro mucho sentido, pero supongo que será el eterno identificador único y universal (por seculem seculorum... o como se diga...)

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #14 (permalink)  
Antiguo 14/08/2011, 17:10
 
Fecha de Ingreso: mayo-2011
Mensajes: 1.201
Antigüedad: 13 años, 6 meses
Puntos: 10
Respuesta: recuperar valor por $_get sin recargar pagina

caricatos, ahora si entendi la forma de hacerlo, gracias por tu explicacion. Otra cosa, si con esos valores quiero utilizarlos para codigo php por ejemplo guardarlos en una variable de php para poder mostrar en la misma pagina que esta la lista desplegable, como seria?

Saludos.

Última edición por pithon; 14/08/2011 a las 18:03
  #15 (permalink)  
Antiguo 14/08/2011, 20:44
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 7 meses
Puntos: 1284
Respuesta: recuperar valor por $_get sin recargar pagina

Hola:

En php creo que lo único posible es usar variables de sesión...

<?php
session_start();
$_SESSION["get"] = $_GET;
?>

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #16 (permalink)  
Antiguo 15/08/2011, 04:41
 
Fecha de Ingreso: mayo-2011
Mensajes: 1.201
Antigüedad: 13 años, 6 meses
Puntos: 10
Respuesta: recuperar valor por $_get sin recargar pagina

Caricatos yo conseguir solucionar mi problema, pero ahora tengo otra duda.

esta script lo hice solo con un select y para hacerlo con dos select dependientes como seria?
si me puedieras dar los pasos con alguna explicacion te lo agradeceria.

Saludos.

Última edición por pithon; 15/08/2011 a las 11:40
  #17 (permalink)  
Antiguo 07/05/2013, 05:40
 
Fecha de Ingreso: julio-2003
Mensajes: 30
Antigüedad: 21 años, 4 meses
Puntos: 1
Respuesta: recuperar valor por $_get sin recargar pagina

ag! pero no funciona con
jquery-1.9.1.min.js !!

ayuda que lo había conseguido pero necesito usar 1.9.1 !!
  #18 (permalink)  
Antiguo 29/08/2013, 15:11
Avatar de skardo  
Fecha de Ingreso: febrero-2013
Ubicación: Lima
Mensajes: 68
Antigüedad: 11 años, 9 meses
Puntos: 1
Respuesta: recuperar valor por $_get sin recargar pagina

Genial,
disculpen por revivir el post de años atras pero realmente me esta sirviendo ahora que me han pedido un proyecto similar, diganme como puedo hacer para que se mande mas de dos o tres variables, pueden ayudarme porfavor

Código HTML:
Ver original
  1. <script type="text/javascript" src="jquery-1.6.2.min.js" /></script>
  2. $(document).ready(function(){  
  3.      $("#formulario").submit(function(){
  4.         var opcion = $("#opcion").val().replace('opcion ','');
  5.         var opcion2 = $("#opcion2").val().replace('opcion2 ','');
  6.         $("#mensaje").html("Procesando");
  7.             $.post("verificar.php?opcion="+opcion"&opcion2="+opcion2, {}, function(datos){
  8.                $("#datos").html(datos);
  9.                 $("#mensaje").html("Listo");
  10.             });
  11.     });
  12.    
  13.    
  14. });
  15. </head>
  16.          <span id='mensaje'></span>
  17.                     <div>
  18.                        
  19.                         <form id='formulario' method='GET'>
  20.                         <input type="checkbox" id='opcion' value='30'>San Lorenzo
  21.                         <input type="checkbox" id='opcion2' value='40'>San Lorenzo                      
  22.                         </form>
  23.                    
  24.                
  25.                     </div>
  26.                
  27.     <div id='datos'></div>
  28. </body>
  29. </html>

este seria el php
Código PHP:
Ver original
  1. $opcion = $_GET['opcion'];
  2.     $opcion2 = $_GET['opcion2'];    
  3.     $base="200";
  4.     $result=$base+$opcion+$opcion2;
  5.     echo $result;

estoy tratando de sumar dos variables a un monto y me muestre la suma .... me puedes ayudar porfavor

Etiquetas: ajax, recargar, recuperar, select
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:50.