Foro de elhacker.net

Programación => PHP => Mensaje iniciado por: valago en 25 Octubre 2012, 12:38 pm


Título: Evitar mandar variables por URL y redireccionamiento, se usa AJAX??
Publicado por: valago en 25 Octubre 2012, 12:38 pm
Hola amigos, ya que soy un poco novato, me surge un problema y es que estoy programando en php y a la hora de por ejemplo enviar una solicitud de amistad, me gustaría que en vez de estar accediendo a otras páginas y mandando las variables a través de la URL, hacerlo para que se ejecute todo y el usuario no vea nada, el molesto redireccionamiento.

En mi caso, he intentado solucionarlo usando AJAX:

Este es la forma en que llamo a mi script.js que llama a otra pagina archivo.php que es la que hace el insert en la base de datos.
Hasta ahí bien, lo hace correcto, pero para que me muestre los cambios en mi página principal, por ejemplo que ya no me muestre el boton solicitar amistad, tengo que recargar la página, para eso uso location.reload(). Pero eso hace que recargue el navegador, con las consiguientes molestias para el usuario, de que el navegador le muestra un mensaje con que tienen que reenviar los datos del formulario si acepta, etc.
 
Código
  1. <input type="text" value="<?php echo $code_friend; ?>" name="post_id" id="<?php echo $code_friend; ?>">
  2. <button type="button" onClick="votar('<?php echo $code_friend; ?>');location.reload();">Solicitud de amistad</button><br />


Esto es lo que hay dentro de script.js
Código
  1.     function votar(elId){
  2.              $.ajax({
  3.         type: 'POST',
  4.         url: 'archivo.php',
  5.          data: 'id='+$("#" + elId).val(),
  6.         success: function(h){
  7.                 // Un mensaje que muestra lo que imprimo con php
  8.               alert("DENTRO DE SCRIPT"+$("#"+ elId).val()+h);
  9.  
  10.         }
  11.       });
  12. }
  13.  

Como podría solucionar este problema??. Estoy ahora mismo atrancado y no tengo mas ideas.

Gracias de antemano y un saludo.

Título: Re: Evitar mandar variables por URL y redireccionamiento, se usa AJAX??
Publicado por: [u]nsigned en 25 Octubre 2012, 15:04 pm
Si solo queres ocultar el boton podes usar el metodo hide de jQuery.

Al boton agregale el id="miboton" (por poner un nombre). Y luego en la funcion votar, al final o dentro de success de ajax agregas la siguiente linea, para ocultar el boton:

Código
  1. $('#miboton').hide();
  2.  

Saludos

Título: Re: Evitar mandar variables por URL y redireccionamiento, se usa AJAX??
Publicado por: RevangelyonX en 25 Octubre 2012, 20:21 pm
Hola,

Estoy de acuerdo con lo que te comentan (aconsejo meterlo dentro del success y agregar un error).

Agrego que, esta parte del código es redundante:

Código:
data: 'id='+$("#" + elId).val(),
La puedes reducir así:
Código:
data: 'id='+elId,

Salu2

Título: Re: Evitar mandar variables por URL y redireccionamiento, se usa AJAX??
Publicado por: valago en 26 Octubre 2012, 09:44 am
Hola de nuevo, gracias por vuestras respuestas. El As del club paris, sería una buena solución pero no funciona bien, ya que antes de imprimir el botón de solicitud de amistad, hace una comprobación en la base de datos. Y sin esa comprobación, no lo hace bien, recargando la página vuelve a ejecutar todo el código y funciona bien, pero así solo funciona bien la primera solicitud el resto ya no haría nada el boton. Les pongo el código para que se hagan una idea.
A lo mejor necesitaria modular mas el código para que no cargue en la misma página, o no se, espero se les ocurra alguna solución.

Código
  1. <?php
  3. ?>
  4.  
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  6. <html xmlns="http://www.w3.org/1999/xhtml">
  7. <head>
  8. <?
  9. 	include ("include/connection.php");
  10. 	include ("language.php");
  11.  
  12. ?>
  13.  
  14. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  15. <title>find</title>
  16. <link rel="stylesheet" type="text/css" href="css/index.css">
  17.  
  18.  
  19. <script type="text/javascript" src="js/jQuery-1.8.2.min.js"></script>  
  20. <script type="text/javascript" src="js/script.js"></script>  
  21. <!--<script type="text/javascript" src="js/jQuery-ui-1.7.2.custom.min.js"></script>
  22.  
  23. <script type="text/javascript">
  24. //<![CDATA[
  25. function votar(elid){
  26. var valor = $('#'+elid).val();
  27. alert('archivo.php?id='+ valor);
  28. }
  29. //]]>
  30. </script>--> 
  31.  
  32. </head>
  33.  
  34. <body>
  35.  
  36.  
  37. <div id="head">
  38.    <? include ("head.php")?>
  39. </div>
  40.  
  41.  
  42.  <div id="home">
  43. 	<div class="colIzq">
  44.        	<? include ("left.php")?>
  45.     </div>
  46.  
  47.     <div class="colCen">
  48.  
  49.     <?
  50. 	//Para buscar por nombre, apellido, etc.
  51. 		$consulta = "SELECT * FROM user WHERE (name LIKE '%".$_POST['find']."%' OR surname LIKE '%".$_POST['find']."%' OR locality LIKE'%".$_POST['find']."%' OR  province LIKE '%".$_POST['find']."%' or nacionality LIKE'%".$_POST['find']."%') AND code <> '".$_SESSION['code']."';";
  52.  
  53. 		$result = mysql_query($consulta, $conn) or die (mysql_error()) ;
  54. 		$toresult = mysql_num_rows($result);
  55. 		if ($toresult>0) {?>
  56.     	 <div class="tabla">
  57.         <?
  58. 			while($row = mysql_fetch_assoc($result)){
  59. 		?>
  60.     		  <div class="fila">  
  61.  
  62.  
  63.  
  64.             	<div class="findPhotoCol">	
  65.         <?
  66. 					if (empty($row['photo'])){
  67. 						$photo="./0x0/NoDisponible.jpg";
  68.  
  69. 					}else{
  70. 						$photo= "users/".$row['code']."/".$row['photo'];
  71.  
  72. 					}?>
  73. 					<img src="<?php echo $photo ?>" width="130" height="130" />
  74.          		</div>
  75.          		<div class="findDateCol">
  76.         <?
  77.  
  78. 					echo "<div class=\"findName\">" .$row['name']." " .$row['surname']."</div>";
  79. 					echo "<div class=\"findDate\">" .$row['email']."<br>";
  80. 					echo  $row['birth_data']."<br>";
  81. 					echo  $row['locality']."<br>";
  82. 					echo  $row['province']."<br>";
  83. 					echo  $row['nacionality']."<br></div>";
  84.  
  85. 					$code_user=$_SESSION['code'];
  86. 					$code_friend=$row['code'];
  87. 					$name_friend=$row['name']." ".$row['surname'];
  88.  
  89. 		?>
  90.        	 		</div>
  91.  
  92.              <? 
  93. 			 //Comprobamos que no sea ya mi amig@
  94. 			$sqlmyfriend= "select * from friends where (user_code='".$_SESSION['code']."' and friend='".$row['code']."') or (user_code='".$row['code']."' and friend='".$_SESSION['code']."') ;";
  95. 			$resultmyfriend = mysql_query($sqlmyfriend, $conn) or die (mysql_error()) ;
  96. 			$toresultfriend = mysql_num_rows($resultmyfriend);
  97. 			print($toresultfriend);
  98. 			//Si no ha encontrado ningún resultado imprime el boton
  99. 			if ($toresultfriend==0) {?>
  100.             <!--Antiguos Inputs
  101. 				<input type="text" value="<?php echo $code_friend; ?>" name="post_id" id="post_id"> 
  102. 				<button type="button" onClick="votar()"><?php echo $i_FRIENDSHIP; ?></button>
  103.  
  104.  
  105.                 <input type="text" value="<?php echo $code_friend; ?>" name="<?php echo 'a_' .$code_friend; ?>" id="<?php echo 'a_' .$code_friend; ?>"/>     
  106.     			<button type="button" onClick="votar(<?php echo 'a_' .$code_friend; ?>)"><?php echo $i_FRIENDSHIP; ?></button>-->
  107.  
  108.               <!--  <input type="text" value="f51cf26546" name="post_id" id="a_f51cf26546">
  109. 				<button type="button" onClick="votar('a_f51cf26546');">Solicitud de amistad</button><br />-->
  110. 				<input type="text" value="<?php echo $code_friend; ?>" name="post_id" id="<?php echo $code_friend; ?>">
  111. 				<button type="button" id="miboton" onClick="votar('<?php echo $code_friend; ?>');">Solicitud de amistad</button><br />                         
  112.         <? 	} ?>
  113.          </div>
  114.       <? } ?>
  115. 	</div>	
  116. 	<?
  117.     echo mysql_error();
  118.  
  119. }
  120. ?>
  121.  
  122.     </div>
  123.  
  124. 	<div class="colDer">
  125.         	<? include ("right.php")?>
  126.      </div>
  127. </div>		
  128.  
  129. </body>
  130.  
  131. </html>
  132.  


Y aquí el código que genera


Código
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. &#65279;  
  5.  
  6.  
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <title>find</title>
  9. <link rel="stylesheet" type="text/css" href="css/index.css">
  10.  
  11.  
  12. <script type="text/javascript" src="js/jQuery-1.8.2.min.js"></script>  
  13. <script type="text/javascript" src="js/script.js"></script>  
  14. <!--<script type="text/javascript" src="js/jQuery-ui-1.7.2.custom.min.js"></script>
  15.  
  16. <script type="text/javascript">
  17. //<![CDATA[
  18. function votar(elid){
  19. var valor = $('#'+elid).val();
  20. alert('archivo.php?id='+ valor);
  21. }
  22. //]]>
  23. </script>--> 
  24.  
  25. </head>
  26.  
  27. <body>
  28.  
  29.  
  30. <div id="head">
  31.  
  32. <script language="javascript">
  33. 	function Borrar(valor)
  34. 	{
  35. 		if(document.getElementById("find").value==valor)
  36. 		{
  37. 			document.getElementById("find").value="";
  38. 		}
  39. 	}
  40.  
  41. 	function Escribir(valor)
  42. 	{
  43. 		if(document.getElementById("find").value=="")
  44. 		{
  45. 			document.getElementById("find").value=valor;
  46. 		}
  47. 	}
  48.  
  49.  
  50. </script>
  51.  
  52.  
  53.   <a href="http://192.168.1.96/close_session.php" target="_self">  <input type="text" name="Exit" class="botonTrans" style="width:40px;" value="Salir" /> </a>
  54.  
  55.     <input type="text" name="Usuario" class="botonTrans" value="Usuario: Jose">
  56.      <img src="images/prueba.gif" width="100" height="45" class="insu"  />
  57. 	<a href="http://192.168.1.96/index2.php" target="_self"><img src="images/logo.gif" width="45" height="40" alt="prueba logo" title="Logo prueba" class="insuprueba"/></a>
  58.  
  59.  
  60.  
  61.     <a href="#" target="_blank"> <img src="images/mensajes.png" class="icoHead" title="Messages"/></a>
  62.     <a href="http://192.168.1.96/insubook/friends.php" target="_self"> <img src="images/solicitud.png" class="icoHead" title="Your friends"/></a>
  63.     <a href="#" target="_blank"> <img src="images/notificaciones.png" class="icoHead" title="Find insurances" /></a>
  64.     <a href="#" target="_blank"> <img src="images/notificaciones.png" class="icoHead" title="Applications" /></a>
  65.     <a href="#" target="_blank"> <img src="images/notificaciones.png" class="icoHead" title="Groups" /></a> 
  66.  
  67.  
  68.  
  69.  
  70.   <form name="finds" action="find.php" method="post">
  71.  	<input id="find" name="find" type="text" class="busHead"  value="Busca personas, lugares y cosas" onfocus="Borrar('Busca personas, lugares y cosas')" onblur="Escribir('Busca personas, lugares y cosas')" size="40"/>    
  72.   </form>
  73.  
  74.  
  75.  </div>
  76.  
  77.  
  78.  <div id="home">
  79. 	<div class="colIzq">
  80.        		<a href="#" target="_blank"> <img src="images/solicitud.png" class="icoHead" title="menu1" /></a> <br />
  81.     <a href="#" target="_blank"> <img src="images/solicitud.png" class="icoHead" title="menu2" /></a> <br />
  82.     <a href="#" target="_blank"> <img src="images/solicitud.png" class="icoHead" title="menu3" /></a> <br />
  83.  
  84.  
  85.  
  86.  
  87.     </div>
  88.  
  89.     <div class="colCen">
  90.  
  91.         	 <div class="tabla">
  92.             		  <div class="fila">  
  93.  
  94.  
  95.  
  96.             	<div class="findPhotoCol">	
  97.         					<img src="./0x0/NoDisponible.jpg" width="130" height="130" />
  98.          		</div>
  99.          		<div class="findDateCol">
  100.         <div class="findName">android android</div><div class="findDate">android@android.com<br><br><br><br><br></div>       	 		</div>
  101.  
  102.              0            <!--Antiguos Inputs
  103. 				<input type="text" value="29ddbdb402" name="post_id" id="post_id"> 
  104. 				<button type="button" onClick="votar()">Solicitud de amistad</button>
  105.  
  106.  
  107.                 <input type="text" value="29ddbdb402" name="a_29ddbdb402" id="a_29ddbdb402"/>     
  108.     			<button type="button" onClick="votar(a_29ddbdb402)">Solicitud de amistad</button>-->
  109.  
  110.               <!--  <input type="text" value="f51cf26546" name="post_id" id="a_f51cf26546">
  111. 				<button type="button" onClick="votar('a_f51cf26546');">Solicitud de amistad</button><br />-->
  112. 				<input type="text" value="29ddbdb402" name="post_id" id="29ddbdb402">
  113. 				<button type="button" id="miboton" onClick="votar('29ddbdb402');">Solicitud de amistad</button><br />                         
  114.                  </div>
  115.           		  <div class="fila">  
  116.  
  117.  
  118.  
  119.             	<div class="findPhotoCol">	
  120.         					<img src="./0x0/NoDisponible.jpg" width="130" height="130" />
  121.          		</div>
  122.          		<div class="findDateCol">
  123.         <div class="findName">Puri Martinez</div><div class="findDate">puri2@gmail.com<br><br>La puebla<br>Murcia<br>Espa&#65533;ola<br></div>       	 		</div>
  124.  
  125.              1         </div>
  126.       	</div>	
  127.  
  128.     </div>
  129.  
  130. 	<div class="colDer">
  131.  
  132. 	<img src="./0x0/NoDisponible.jpg" width="150" height="150" />
  133.  
  134.  
  135.  
  136.  
  137.  
  138.      </div>
  139. </div>		
  140.  
  141. </body>
  142.  
  143. </html>
  144.  

Muchas gracias de nuevo, Un saludo.



Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines