Foro de elhacker.net

Programación => PHP => Mensaje iniciado por: jalbtercero en 22 Mayo 2016, 22:01 pm


Título: ajax recibir daros
Publicado por: jalbtercero en 22 Mayo 2016, 22:01 pm
Hola tengo una funciopn para recibir los datos en ajax sin actualizar la pagina solo el div, alguien me podria facilitar un codigo de ejemplo para enviar datos con ajaz sin actualizar pagina


Título: Re: ajax recibir daros
Publicado por: gAb1 en 23 Mayo 2016, 00:42 am
JQuery tiene una función llamada serializeArray (https://api.jquery.com/serializeArray/) que guarda el formulario en un array con el nombre del elemento y el valor. Luego simplemente con la función post (https://api.jquery.com/jquery.post/) envias el array y puedes actualizar el div con la respuesta del servidor.

Título: Re: ajax recibir daros
Publicado por: jalbtercero en 23 Mayo 2016, 00:48 am
Cita de: gAb1 en 23 Mayo 2016, 00:42 am
JQuery tiene una función llamada serializeArray (https://api.jquery.com/serializeArray/) que guarda el formulario en un array con el nombre del elemento y el valor. Luego simplemente con la función post (https://api.jquery.com/jquery.post/) envias el array y puedes actualizar el div con la respuesta del servidor.

ok me aclarare por si acaso: Tengo dos .php 1 inserta los elemntos en la base de datos y el otro los carga en una pagina y los actualizo con ajax, lo quye quiero es con ajax enviar los datos a la base de datos sin tener que actualizar la pagina


Ajax:
Código
  1. function objetoAjax(){
  2. 	var xmlhttp=false;
  3. 	try {
  4. 		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  5. 	} catch (e) {
  6.  
  7. 	try {
  8. 		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  9. 	} catch (E) {
  10. 		xmlhttp = false;
  11. 	}
  12. }
  13.  
  14. if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  15. 	  xmlhttp = new XMLHttpRequest();
  16. 	}
  17. 	return xmlhttp;
  18. }
  19.  
  20. //Función para recoger los datos del formulario y enviarlos por post  
  21. function enviarDatosEmpleado(){
  22.  
  23.  
  24.   divResultado = document.getElementById('contenedor');
  25.  
  26.   mensaje=document.from.mensaje.value;
  27.  
  28.  
  29.   ajax=objetoAjax();
  30.  
  31.  
  32.   ajax.open("POST", "ingresar.php",true);
  33.  
  34.   ajax.onreadystatechange=function() {
  35.  
  36.   	if (ajax.readyState==4) {
  37.  
  38. 		divResultado.innerHTML = ajax.responseText
  39.  
  40. 		LimpiarCampos();
  41. 	}
  42.  }
  43. 	ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  44.  
  45. 	ajax.send("mensaje="+mensaje);
  46. }
  47.  
  48. function LimpiarCampos() {
  49.   document.form.mensaje.value="";
  50. }
  51.  

ingresar.php
Código
  2. require("connect_db.php");
  3. $nombre = $_SESSION['usuario'];
  4. $mensaje = $_POST['mensaje'];
  5.  
  6. mysql_query("INSERT INTO chat VALUES('$nombre','$mensaje')");
  7. mysql_close($link);
  8.  

cargar.php
Código
  1. <?php
  3. require("connect_db2.php");
  4.  
  5. $colo = "#320EF8";
  6. function mostrarDatos($resultados ,$color) {
  7. if($resultados !=NULL){
  8.  
  9. 	       echo "<p style='display: inline; color: $color; font-size: 120%; margin-left: 8px;'>".$resultados['nombre']."</p>";
  10.                echo ": ";
  11.                echo $resultados['mensaje'];
  12.                echo "</br>";
  13.                echo "-------------------------------------------------------------------";
  14.  
  15.                echo "</br>"; 
  16.  
  17.  
  18.  
  19.  
  20.  
  21.  
  22.  
  23. 	} else {
  24.  
  25. 	echo "<br/>No hay mas datos<br/>";
  26. }
  27. }
  28.  
  29.  
  30. $result = mysqli_query($link,"SELECT * FROM chat");
  31.  
  32.  
  33. while($fila = mysqli_fetch_array($result)) {
  34. 	mostrarDatos($fila, $colo);
  35. }
  37. mysqli_close($link);
  38.  

pagina:

Código
  3.         <script language="javascript" type="text/javascript" src="enviar.js"></script>
  4. 	<link rel="stylesheet" type="text/css" href="chat.css">
  5.         <link rel="stylesheet" type="text/css" href="inicio.css">
  6. 	<script src="ajax.js"></script>
  7. </head>
  8. <body background="fondos/fondo-inicio.jpg"">
  9. <ul>
  10.   <li><a class="active" href="inicio.php">Inicio</a></li>
  11.   <li><a href="paginaad.php">Administracion</a></li>
  12.   <li><a href="comentarios.php">Reporta</a></li>
  13.   <ul style="float:right;list-style-type:none;">
  14.     <li><a href="#about">Sobre mi</a></li>
  15.     <li><a href="salir.php">Logout</a></li>
  16.   </ul>
  17. </ul>
  18. 	<div id="contenedor">
  19. 	</div>
  20. 	<form action="" method="POST" name="form" onsubmit="enviarDatosEmpleado(); return false">
  21. 		<input type="text" id="mensaje" name="mensaje">
  22. 		<input type="submit" id="boton" value="Enviar">
  23. 	</form>
  24.  
  27. </body>
  28. </html>
  29.  

Título: Re: ajax recibir daros
Publicado por: gAb1 en 24 Mayo 2016, 02:20 am
Te recomiendo que uses JQuery (https://code.jquery.com/jquery-2.2.4.min.js) para este tipo de cosas ya que es mucho más sencillo que todo eso que estás haciendo (casi ni lo entiendo  :rolleyes:).

No necesitas usar el elemento form si vas a enviar por ajax, por lo que lo puedes quitar. Tampoco necesitas un input submit, cambialo por un anchor (y por cierto, los inputs hay que cerrarlos):

Código
  1. <div id="contenedor"></div>
  2. <input type="text" id="mensaje" name="mensaje" />
  3. <a id="boton" href="#">Enviar</a>

Esto sería enviar.js:

Código
  1. $(function () {
  2.     $('#boton').on('click', function () {
  3.         var mensaje = $('#mensaje').val(),
  4.             ajax    = $.post('mensaje.php?op=1', { s: mensaje } );
  5.  
  6.         ajax.done(function() {
  7.             var content = $.get('mensaje.php?op=2');
  8.             $('#contenedor').empty().append( content );
  9.             $('#mensaje').val('');
  10.         });
  11.     });
  12. });

Y esto mensaje.php (ingresar.php y cargar.php juntos):

Código
  1. <?php
  2.  
  4.  
  5. require('connect_db2.php');
  6.  
  7. $op = (int) $_GET['op'];
  8.  
  9. if ($op === 1) {
  10.     $nombre  = $_SESSION['usuario'];
  11.     $mensaje = $_POST['mensaje'];
  12.  
  13.     mysqli_query($link, "INSERT INTO chat (nombre, mensaje) VALUES('$nombre', '$mensaje')");
  14.     mysqli_close($link);
  15.  
  16. } else if ($op === 2) {
  17.     $color = '#320EF8';
  18.  
  19.     function mostrarDatos($resultados, $color) {
  20.         if($resultados !== NULL) {
  21.             $mensaje = '<p style="display: inline; color: ' . $color . '; font-size: 120%; margin-left: 8px;">' . $resultados['nombre'] . ': </p>' .
  22.                        $resultados['mensaje'] . '<br /><hr><br />';
  23.         } else $mensaje = '<br />No hay mas datos<br />';
  24.  
  25.         return $mensaje;
  26.     }
  27.  
  28.     $result = mysqli_query($link, 'SELECT * FROM chat');
  29.  
  30.     while ($fila = mysqli_fetch_array($result)) {
  31.         echo mostrarDatos($fila, $color);
  32.     }
  33.  
  34.     mysqli_free_result($result);
  35.     mysqli_close($link);
  36. }
  37.  
  38. ?>

Título: Re: ajax recibir daros
Publicado por: jalbtercero en 24 Mayo 2016, 11:08 am
Cita de: gAb1 en 24 Mayo 2016, 02:20 am
Te recomiendo que uses JQuery (https://code.jquery.com/jquery-2.2.4.min.js) para este tipo de cosas ya que es mucho más sencillo que todo eso que estás haciendo (casi ni lo entiendo  :rolleyes:).

No necesitas usar el elemento form si vas a enviar por ajax, por lo que lo puedes quitar. Tampoco necesitas un input submit, cambialo por un anchor (y por cierto, los inputs hay que cerrarlos):

Código
  1. <div id="contenedor"></div>
  2. <input type="text" id="mensaje" name="mensaje" />
  3. <a id="boton" href="#">Enviar</a>


Esto sería enviar.js:

Código
  1. $(function () {
  2.     $('#boton').on('click', function () {
  3.         var mensaje = $('#mensaje').val(),
  4.             ajax    = $.post('mensaje.php?op=1', { s: mensaje } );
  5.  
  6.         ajax.done(function() {
  7.             var content = $.get('mensaje.php?op=2');
  8.             $('#contenedor').empty().append( content );
  9.             $('#mensaje').val('');
  10.         });
  11.     });
  12. });

Y esto mensaje.php (ingresar.php y cargar.php juntos):

Código
  1. <?php
  2.  
  4.  
  5. require('connect_db2.php');
  6.  
  7. $op = (int) $_GET['op'];
  8.  
  9. if ($op === 1) {
  10.     $nombre  = $_SESSION['usuario'];
  11.     $mensaje = $_POST['mensaje'];
  12.  
  13.     mysqli_query($link, "INSERT INTO chat (nombre, mensaje) VALUES('$nombre', '$mensaje')");
  14.     mysqli_close($link);
  15.  
  16. } else if ($op === 2) {
  17.     $color = '#320EF8';
  18.  
  19.     function mostrarDatos($resultados, $color) {
  20.         if($resultados !== NULL) {
  21.             $mensaje = '<p style="display: inline; color: ' . $color . '; font-size: 120%; margin-left: 8px;">' . $resultados['nombre'] . ': </p>' .
  22.                        $resultados['mensaje'] . '<br /><hr><br />';
  23.         } else $mensaje = '<br />No hay mas datos<br />';
  24.  
  25.         return $mensaje;
  26.     }
  27.  
  28.     $result = mysqli_query($link, 'SELECT * FROM chat');
  29.  
  30.     while ($fila = mysqli_fetch_array($result)) {
  31.         echo mostrarDatos($fila, $color);
  32.     }
  33.  
  34.     mysqli_free_result($result);
  35.     mysqli_close($link);
  36. }
  37.  
  38. ?>

@gAb1 Gracias peroi el mensaje no se guarda en la base de datos, el nombre si pero no el mensaje

Título: Re: ajax recibir daros
Publicado por: jalbtercero en 24 Mayo 2016, 11:12 am
Cita de: gAb1 en 24 Mayo 2016, 02:20 am





Y esto mensaje.php (ingresar.php y cargar.php juntos):

Código
  1. <?php
  2.  
  3.  
  4.  
  5. $op = (int) $_GET['op'];
  6.  
  7.  
  8.  

No entiendo muy bien que hace esta linea esta cogiendo un valor int a traves de GET con el nombree op..

Título: Re: ajax recibir daros
Publicado por: gAb1 en 24 Mayo 2016, 21:13 pm
El código debería funcionar bien, no veo ningún fallo.

Para este tipo de casos tienes que hacer debug: pon un alert(mensaje) en el script y mira si al hacer click en enviar se muestra el mensaje que pusiste. Si se muestra, habrá que ver si se está enviando el mensaje por post al archivo mensaje.php, para ello pon un echo $mensaje en dentro del primer if y otro alert(data) en el script enviar.js:

Código
  1. if ($op === 1) {
  2.     $nombre  = $_SESSION['usuario'];
  3.     $mensaje = $_POST['mensaje'];
  4.     echo $mensaje;/*
  5.     mysqli_query($link, "INSERT INTO chat (nombre, mensaje) VALUES('$nombre', '$mensaje')");
  6.     mysqli_close($link);*/
  7.  
  8. }

Código
  1.     $(function () {
  2.         $('#boton').on('click', function () {
  3.             var mensaje = $('#mensaje').val(),
  4.                 ajax    = $.post('mensaje.php?op=1', { s: mensaje } );
  5.      alert(mensaje);
  6.             ajax.done(function(data) {
  7.      alert(data);/*
  8.                 var content = $.get('mensaje.php?op=2');
  9.                 $('#contenedor').empty().append( content );
  10.                 $('#mensaje').val('');*/
  11.             });
  12.         });
  13.     });

La linea que coge el valor int en el archivo mensaje.php se utiliza para saber si vas a guardar datos en la db o vas a cogerlos. Así no necesitas tener dos archivos, solo 1.

Título: Re: ajax recibir daros
Publicado por: AlbertoBSD en 24 Mayo 2016, 22:13 pm
Te comento nuevamente por aqui si hay falla en el ajax esta mandando el mensaje en una variable llamada "s".

Y en el PHP la quiee recivir con el nombre de "mensaje".

La otra es que es vulnerable a SQLinjection Por que no sanitiza sus variables de entrada.

Saludos.


Título: Re: ajax recibir daros
Publicado por: gAb1 en 24 Mayo 2016, 22:33 pm
Ah! Fallo mio, el copia pega xD gracias AlbertoBSD por darte cuenta.

Código
  1. $.post('mensaje.php?op=1', { mensaje: mensaje } );

No dije nada sobre comprobar la variable porque creia que ya lo tendria controlado. De todas maneras lo pongo que no cuesta nada:

Un mínimo de seguridad sería:

Código
  1. $mensaje = filter_input(INPUT_POST, 'mensaje', FILTER_SANITIZE_STRING);

Aunque sería mucho más seguro si usaras prepared statements.

Título: Re: ajax recibir daros
Publicado por: AlbertoBSD en 24 Mayo 2016, 22:59 pm
yo uso para sanitizar los inputs que van a mysql

http://php.net/manual/en/mysqli.real-escape-string.php

Tengo una rutina que procesa todo el array GET o POST y me ll devuelve sanitizado.

Asi mismo casi no guardo valores en texto plano

Solo el ID que siempre proceso con intval() los demas valores los cifro con AES o algunos valores como los passwords guardo solo guardo un substring del hash del hash del enesimo hash.

Aunque tambien sirve el base64_encode etc...

Al rato qur llegue a mi casa pego la funcion que uso para sanitizar todo el array.

Saludos

Título: Re: ajax recibir daros
Publicado por: AlbertoBSD en 26 Mayo 2016, 05:00 am
Sobre lo que comentas que se vuelve lento al momento de cargar es por que En cada envio de mensaje vuelves a leer todos los mensajes existentes la base de datos:

Código
  1.     $result = mysqli_query($link, 'SELECT * FROM chat');
  2.  
  3.     while ($fila = mysqli_fetch_array($result)) {
  4.         echo mostrarDatos($fila, $color);
  5.     }

Esa funcion mostrarDatos te devuelve todos los datos y es lo que madas de regreso al ajax..

Offtopic para chiste geek.
Citar
Su nombre es Francis, saco lo de Ajax del javascript....

Como te decia En cada actualizacion lees todos los mensajes otra vez y los vuelves a colocar en la ventana

Código
  1. $('#contenedor').empty().append( content );

Podrias simplemente llevar un registro de cual es el ultimo mensaje recivido por el usuario X y en el SQL del chat solo pedir los mensjaes que sean mayor que el ultimo dato mandado y listo,

Un buen lugar para guardar ese dato es en la cookie o en el session del php aunque opciones hay muchas. puedes delegarlo al cliente y que te lo mande con cada consulta ajax y actualizar la variable desde el javascrip cada que reciva elementos nuevos.

Entonces al recibitlos puede hacerles append normal sobre el div sin necesidad de actualizarlo todo.

Saludos

Título: Re: ajax recibir daros
Publicado por: gAb1 en 27 Mayo 2016, 18:24 pm
Haciendo eso no serviria para tiempo real, porque si entran dos usuarios a la web y sin recargar la página pondrían mensajes y cada uno solo vería sus propios mensajes y no los de los demás hasta que no recargaran.

Para producción hay varias cosas que se podrían mejorar bastante:

Primero ese script estaría llamando mil veces la misma función y reventaria el servidor cuando hayan varios usuarios online. Para solucionarlo se mueve el while dentro de la función, llamandola 1 vez pasandole como arguamento el fetch array:

Código
  1. function mostrarDatos($result, $color) {
  2.     while ($fila = mysqli_fetch_array($result)) {
  3.  
  4.     }
  5. }
  6.  
  7. $result = mysqli_query($link, 'SELECT * FROM chat');
  8.  
  9. echo mostrarDatos($result, $color);
  10.  

De igual modo no veo necesidad para una función...

Para tiempo real, habria que hacer que jquery hiciera una petición cada X segundos (5 como mínimo) y que comprobara si hay nuevos mensajes. Para empezar habria que enumerarlos con un id y usar ese id para saber cual es el ultimo mensaje y mostrar los ids que falten.

Título: Re: ajax recibir daros
Publicado por: jalbtercero en 27 Mayo 2016, 23:22 pm
Muchas gracias por la aclaracion pero no te preocupes, ya tenia un script en ajax que cada segundo esta actualizando el div donde se encuentra el chat

Saludos

Título: Re: ajax recibir daros
Publicado por: jalbtercero en 29 Mayo 2016, 11:41 am
gAb1 Vulevo a probar he implementar tu codigo:


Mira dejemos el lado estetico de lado, El script que has "comprimido no va bien", es decir cada vez que entro al chat se envia un mensaje vacio, si pongo el boton como <a> no pasa nada, la funcion, valgame la redundancia, no funciona, y ya para terminar el scroll (de la demo), no va bien, porque no baja del todo, a veces se queda arriba, otras veces solo baja un poco..

Despues he modificado mi pagina y he puesto el scroll, pero solo me lo hace 1 vez, que es cuando entra a la pagina y me envia el mensaje vacio: las otras veces me dice:

Uncaught TypeError: Cannot read property 'top' of undefined


(anonymous function)   @   enviar.js:12
i   @   jquery.min.js:2
j.fireWith   @   jquery.min.js:2
z   @   jquery.min.js:4
(anonymous function)   @   jquery.min.js:4



Saludos.

Título: Re: ajax recibir daros
Publicado por: gAb1 en 29 Mayo 2016, 20:36 pm
A ver por partes:

Si el script que he hecho no funcionase bien, no funcionaria en ninguna parte, sin embargo está funcionando (menos lo del scroll) perfectamente:

- La función se activa ya sea cuando le das a intro o click al boton <a>. En ningún otro momento se debería activar (a menos que la llames desde otra parte).
- Se puede comprobar en la demo (https://jsfiddle.net/8jwonx34/).

¿Por qué dices entonces que no funciona bien? Si no está funcionando en tu página, eso es algo a parte y no es culpa mia. Habrá que encontrar el fallo.

Si cada vez que entras al chat se envia un mensaje vacio, revisa bien que estás haciendo porque el código que yo he escrito no hace nada de eso.

El problema del scroll ya te lo dije en tu otra pregunta y que esperes a que alguien sepa como arreglarlo. No es necesario que me lo recuerdes...

Ahora hay que tratar de localizar que es lo que está provocando que al entrar al chat se envie un mensaje en vacio.

Para no permitir enviar mensajes vacios:

Código
  1. if (mensaje == '') {
  2.     alert('Debes escribir un mensaje!');
  3.     return false;
  4. }

En el link a la demo de esta respuesta se incluye esto, incluyelo en la función y mira si se sigue enviando el mensaje en blanco. Si sigue ocurriendo entonces es algo totalmente ajeno a la función, pero si ya no ocurre entonces quiere decir que en algún lado de tu página estás llamando a la función myFunction().

Haz un poco de debug y descubrirás que está ocurriendo en tu página. Si no logras descubrir donde está el fallo, muestranos todo el código y se intentará localizar el fallo y solucionarlo.


Edito: Se me olvido comentarte: A parte de la comprobación de mensaje vacio también hay otro cambio al actualizar el div, en la demo lo verás, cambia la linea que tienes por $('#final').before( content ); Esto lo que hace es mostrar los mensajes en el orden correcto.

Título: Re: ajax recibir daros
Publicado por: daniela Vega en 30 Mayo 2016, 21:41 pm
Creas DIV con el id “recargado” donde vas a llamar el resultado de un archivo PHP, que podría ser la invocación a una base de datos, un mensaje, validación, prácticamente cualquier cosa que hag PHP y porsupuesto sin recargar la página

<div id="recargado">Mi texto sin recargar</div>
<p align="center">
    <a href="#" onclick="javascript:recargar();">recargar</a>
</p>


 incluyes la libreria jquery
<script language="javascript" src="js/jquery-1.2.6.min.js"></script>


Escribes el código que se ejecutará cuando demos click al link “recargar”
<script language="javascript">
function recargar(){   
       /// Aqui podemos enviarle alguna variable a nuestro script PHP
    var variable_post="Mi texto recargado";
       /// Invocamos a nuestro script PHP
    $.post("miscript.php", { variable: variable_post }, function(data){
       /// Ponemos la respuesta de nuestro script en el DIV recargado
    $("#recargado").html(data);
    });         
}
</script>


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