ajax recibir daros

Iniciado por jalbtercero, 22 Mayo 2016, 22:01 PM

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1 2
Acciones del Usuario

jalbtercero

22 Mayo 2016, 22:01 PM Ultima modificación: 22 Mayo 2016, 22:28 PM por jalbtercero
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

gAb1

#1
23 Mayo 2016, 00:42 AM
JQuery tiene una función llamada serializeArray que guarda el formulario en un array con el nombre del elemento y el valor. Luego simplemente con la función post envias el array y puedes actualizar el div con la respuesta del servidor.

jalbtercero

#2
23 Mayo 2016, 00:48 AM Ultima modificación: 23 Mayo 2016, 01:14 AM por jalbtercero
Cita de: gAb1 en 23 Mayo 2016, 00:42 AM
JQuery tiene una función llamada serializeArray que guarda el formulario en un array con el nombre del elemento y el valor. Luego simplemente con la función 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 (javascript) [Seleccionar]

function objetoAjax(){
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {

try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}

if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}

//Función para recoger los datos del formulario y enviarlos por post 
function enviarDatosEmpleado(){

 
  divResultado = document.getElementById('contenedor');

  mensaje=document.from.mensaje.value;


  ajax=objetoAjax();


  ajax.open("POST", "ingresar.php",true);

  ajax.onreadystatechange=function() {
 
  if (ajax.readyState==4) {
 
divResultado.innerHTML = ajax.responseText
 
LimpiarCampos();
}
}
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

ajax.send("mensaje="+mensaje);
}

function LimpiarCampos() {
  document.form.mensaje.value="";
}


ingresar.php
Código (php) [Seleccionar]

session_start();
require("connect_db.php");
$nombre = $_SESSION['usuario'];
$mensaje = $_POST['mensaje'];

mysql_query("INSERT INTO chat VALUES('$nombre','$mensaje')");
mysql_close($link);


cargar.php
Código (php) [Seleccionar]

<?php
session_start();
require("connect_db2.php");

$colo = "#320EF8";
function mostrarDatos($resultados ,$color) {
if($resultados !=NULL){
       echo "<p style='display: inline; color: $color; font-size: 120%; margin-left: 8px;'>".$resultados['nombre']."</p>";
               echo ": ";
               echo $resultados['mensaje'];
               echo "</br>";
               echo "-------------------------------------------------------------------";
        
               echo "</br>"; 
          
       
                    
              
   
                
     
 } else {
echo "<br/>No hay mas datos<br/>";
}
}

$result = mysqli_query($link,"SELECT * FROM chat");


while($fila = mysqli_fetch_array($result)) {
 mostrarDatos($fila, $colo);
}
mysqli_free_result($result);
mysqli_close($link);


pagina:

Código (html4strict) [Seleccionar]

<html>
<head>
        <script language="javascript" type="text/javascript" src="enviar.js"></script>
<link rel="stylesheet" type="text/css" href="chat.css">
        <link rel="stylesheet" type="text/css" href="inicio.css">
<script src="ajax.js"></script>
</head>
<body background="fondos/fondo-inicio.jpg"">
<ul>
  <li><a class="active" href="inicio.php">Inicio</a></li>
  <li><a href="paginaad.php">Administracion</a></li>
  <li><a href="comentarios.php">Reporta</a></li>
  <ul style="float:right;list-style-type:none;">
    <li><a href="#about">Sobre mi</a></li>
    <li><a href="salir.php">Logout</a></li>
  </ul>
</ul>
<div id="contenedor">
</div>
<form action="" method="POST" name="form" onsubmit="enviarDatosEmpleado(); return false">
<input type="text" id="mensaje" name="mensaje">
<input type="submit" id="boton" value="Enviar">
</form>

<script >
</script>
</body>
</html>

gAb1

#3
24 Mayo 2016, 02:20 AM Ultima modificación: 24 Mayo 2016, 02:23 AM por gAb1
Te recomiendo que uses JQuery 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 (html5) [Seleccionar]
<div id="contenedor"></div>
<input type="text" id="mensaje" name="mensaje" />
<a id="boton" href="#">Enviar</a>

Esto sería enviar.js:

Código (javascript) [Seleccionar]
$(function () {
   $('#boton').on('click', function () {
       var mensaje = $('#mensaje').val(),
           ajax    = $.post('mensaje.php?op=1', { s: mensaje } );
           
       ajax.done(function() {
           var content = $.get('mensaje.php?op=2');
           $('#contenedor').empty().append( content );
            $('#mensaje').val('');
       });
   });
});

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

Código (php) [Seleccionar]
<?php

session_start();

require('connect_db2.php');

$op = (int) $_GET['op'];

if ($op === 1) {
    $nombre  = $_SESSION['usuario'];
    $mensaje = $_POST['mensaje'];

    mysqli_query($link, "INSERT INTO chat (nombre, mensaje) VALUES('$nombre', '$mensaje')");
    mysqli_close($link);

} else if ($op === 2) {
    $color = '#320EF8';

    function mostrarDatos($resultados, $color) {
        if($resultados !== NULL) {
            $mensaje = '<p style="display: inline; color: ' . $color . '; font-size: 120%; margin-left: 8px;">' . $resultados['nombre'] . ': </p>' .
                       $resultados['mensaje'] . '<br /><hr><br />';
        } else $mensaje = '<br />No hay mas datos<br />';

        return $mensaje;
    }

    $result = mysqli_query($link, 'SELECT * FROM chat');

    while ($fila = mysqli_fetch_array($result)) {
        echo mostrarDatos($fila, $color);
    }

    mysqli_free_result($result);
    mysqli_close($link);
}

?>

jalbtercero

#4
24 Mayo 2016, 11:08 AM
Cita de: gAb1 en 24 Mayo 2016, 02:20 AM
Te recomiendo que uses JQuery 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 (html5) [Seleccionar]
<div id="contenedor"></div>
<input type="text" id="mensaje" name="mensaje" />
<a id="boton" href="#">Enviar</a>


Esto sería enviar.js:

Código (javascript) [Seleccionar]
$(function () {
   $('#boton').on('click', function () {
       var mensaje = $('#mensaje').val(),
           ajax    = $.post('mensaje.php?op=1', { s: mensaje } );
           
       ajax.done(function() {
           var content = $.get('mensaje.php?op=2');
           $('#contenedor').empty().append( content );
            $('#mensaje').val('');
       });
   });
});

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

Código (php) [Seleccionar]
<?php

session_start();

require('connect_db2.php');

$op = (int) $_GET['op'];

if ($op === 1) {
    $nombre  = $_SESSION['usuario'];
    $mensaje = $_POST['mensaje'];

    mysqli_query($link, "INSERT INTO chat (nombre, mensaje) VALUES('$nombre', '$mensaje')");
    mysqli_close($link);

} else if ($op === 2) {
    $color = '#320EF8';

    function mostrarDatos($resultados, $color) {
        if($resultados !== NULL) {
            $mensaje = '<p style="display: inline; color: ' . $color . '; font-size: 120%; margin-left: 8px;">' . $resultados['nombre'] . ': </p>' .
                       $resultados['mensaje'] . '<br /><hr><br />';
        } else $mensaje = '<br />No hay mas datos<br />';

        return $mensaje;
    }

    $result = mysqli_query($link, 'SELECT * FROM chat');

    while ($fila = mysqli_fetch_array($result)) {
        echo mostrarDatos($fila, $color);
    }

    mysqli_free_result($result);
    mysqli_close($link);
}

?>

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

jalbtercero

#5
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 (php) [Seleccionar]
<?php



$op = (int) $_GET['op'];




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

gAb1

#6
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 (php) [Seleccionar]
if ($op === 1) {
   $nombre  = $_SESSION['usuario'];
   $mensaje = $_POST['mensaje'];
   echo $mensaje;/*
   mysqli_query($link, "INSERT INTO chat (nombre, mensaje) VALUES('$nombre', '$mensaje')");
   mysqli_close($link);*/

}

Código (javascript) [Seleccionar]
   $(function () {
       $('#boton').on('click', function () {
           var mensaje = $('#mensaje').val(),
               ajax    = $.post('mensaje.php?op=1', { s: mensaje } );
    alert(mensaje);
           ajax.done(function(data) {
    alert(data);/*
               var content = $.get('mensaje.php?op=2');
               $('#contenedor').empty().append( content );
               $('#mensaje').val('');*/
           });
       });
   });

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.

AlbertoBSD

#7
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.

Donaciones
1Coffee1jV4gB5gaXfHgSHDz9xx9QSECVW

gAb1

#8
24 Mayo 2016, 22:33 PM
Ah! Fallo mio, el copia pega xD gracias AlbertoBSD por darte cuenta.

Código (javascript) [Seleccionar]
$.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 (php) [Seleccionar]
$mensaje = filter_input(INPUT_POST, 'mensaje', FILTER_SANITIZE_STRING);

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

AlbertoBSD

#9
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
Donaciones
1Coffee1jV4gB5gaXfHgSHDz9xx9QSECVW
Imprimir
Ir Arriba Páginas1 2
Acciones del Usuario