Envío de comentarios con jQuery y AJAX

En prácticamente todas las Webs con interacción con el usuario es necesario interactuar de la forma más agradable posible con el usuario. Casi todas estas páginas dispone de un sistema para captar y enviar comentarios sobre algún artículo o producto.

La mayoría de sistemas de comentarios trabaja con php y una base de datos. El inconveniente de este tipo de sistemas es que al enviar un comentario la página se tiene que recargar por completo. Si queremos optimizar este sistema y hacer que sólo se cargue el comentario enviado sin tener que recargar la página por completo podemos utilizar la tecnología JQUERY-AJAX para cargar solamente el comentario enviado.

Para conseguir este efecto lo podemos hacer de muchas formas pero una de ellas sería empleando las tecnologías: php, mysql, jquery y ajax.

Lo primero que deberemos hacer es incluir en nuestro <head> los scripts de la librería jQuery y los estilos necesarios para cambiar el aspecto:

<link type="text/css" href="css/styles.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.min.js"></script>

También en nuestro <head> deberemos incluir el código jQuery que hará la llamada AJAX:

<script type="text/javascript">

$(document).ready(function() {

    $("#enviar-btn").click(function() {

        var name = $("input#name").val();
        var comment = $("textarea#comment").val();
        var now = new Date();
        var date_show = now.getDate() + '-' + now.getMonth() + '-' + now.getFullYear() + ' ' + now.getHours() + ':' + + now.getMinutes() + ':' + + now.getSeconds();

        var dataString = 'name=' + name + '&comment=' + comment;

        $.ajax({
            type: "POST",
            url: "addcomment.php",
            data: dataString,
            success: function() {
                $('#newmessage').append('<div><div><img width="48" height="48" src="images/user.png" /></div><div><strong>'+name+'</strong> dice:<br/><small>'+date_show+'</small></div><div>'+comment+'</div></div>');
            }
        });
        return false;
    });
});
</script>

Como vemos, el código anterior espera a que se haga click al botón o link con id=”enviar-btn” recogiendo en las variables “name” y “comment” los datos introducidos en el formulario. Reconstruimos una fecha para mostrar y generamos otra variable “dataString” que relleanamos con los datos enviados en el formulario para luego pasársela al archivo addcomment.php mediante las técnicas AJAX.

El archivo addcomment.php se encarga simplemente de insertar en la base de datos la información necesaria para añadir un comentario. Tiene el siguiente aspecto:

<?php
require('config.php');

$name = utf8_decode($_POST['name']);
$comment = utf8_decode($_POST['comment']);

$insert = mysql_query("INSERT INTO comments (name, text, date_added) VALUES ('$name', '$comment', now())", $conexion);
?>

El archivo que estamos incluyendo en la primera linea se encarga de crear la conexión con la base de datos.

Seguidamente, recogemos mediante el método POST los datos que le hemos pasado mediante las técnicas AJAX. Finalmente, realizamos una inserción con la información recibida en la tabla “comments” de la base de datos.

Una vez se ha realizado esta operación, es cuando se ejecuta el success que hay dentro del ajax, donde simplemente estamos rellenado con append un div con id=”newcomment” que hay al final de los comentarios vacío.

<div id="newmessage"></div>

El formulario para realizar los comentarios es muy sencillo, sería como el siguiente:

<form method="post" action="">
    Nombre:<br/>
    <input type="text" id="name" name="name" size="40" /><br/><br/>
    Comentario:<br/>
    <textarea name="comment" id="comment" rows="6" cols="65"></textarea>
    <br/><br/>
    <div style="margin-left: 480px;"><input name="submit" type="submit" value="enviar" id="enviar-btn" /></div>
</form>

Se podría añadir validación de los campos pero no es el objetivo de este artículo.

Para mostrar la lista de comentarios enviados simplemente recorremos la tabla de comentarios para mostrarlos todos con el estilo que presenta el ejemplo en funcionamiento.

Ver módulo para Prestashop de Comentarios sobre el producto con Ajax

Descargar ejemplo

Breve explicación para la instalación:

  1. Dentro del archivo comprimido hay un archivo comments.sql que deberás ejecutar en alguna base de datos de tu servidor.
  2. Editar el archivo config.php con los datos de conexión con tu base de datos.
  3. Subir los archivos al servidor y ejecutarlo en el navegador
Autor
Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (32 votos, promedio: 4,63 de 5)
Cargando…
Comparte en las redes sociales

88 respuestas a “Envío de comentarios con jQuery y AJAX”

  1. maxuber dice:

    buen aporte super facil

  2. Jesus dice:

    Hola amigo y para hacer que los datos se inserten en la base de datos como hago ? por ejemplo yo tengo una noticia.php?view=1

    eh inserto los comentarios de forma facil:

    $idtema= $_GET[“view”];
    $comment = $_POST[“comment”];
    $time = date(“d/n/Y”);
    $query=’INSERT INTO comentario(IDcm,comentario,idtema,time) VALUES (‘null’,’$comment’,’$idtema’,’$time’)’;
    $result= mysql_query($query);
    if(mysql_affected_rows())
    {
    echo “se ha enviado correctamente”;
    }else{
    echo “error al enviar”;
    }

    uso ese codigo pero no me inserta nada en la tabla (?) cuando uso el codigo de javascript que presentas aqui…

    Mi meta es logra que el usuario de mi sitio web comente en mi noticias y vea su comentario al mismo tiempo que ha publicado.

    Saludos.!

    • Jose Aguilar dice:

      Posiblemente te falte la conexión a la base de datos. Algo como lo qu sigue:

      $conexion = mysql_connect($bd_host, $bd_usuario, $bd_password);
      mysql_select_db($bd_base, $conexion);

      Antes de hacer el insert

      Además debes ejecutar la consulta asi:

      $insert = mysql_query(“INSERT INTO comments (name, text, date_added) VALUES (‘$name’, ‘$comment’, now())”, $conexion);

  3. Main dice:

    Muy buen tutorial gracias por tan ermoso aporte.

    me surge un problema que si el usuario envia cualquier XSS el success: lo ejecuta como puedo hacer para que no me pase esto…

  4. Manuel dice:

    Hola que tal José me surge un inconveniente con el código no se si podrás solucionarlo lo que pasa que cuando hace el sucess: este ejecuta cualquier xss ósea el usuario envía jose y este muestra el link jose
    Se entiende ¿?

  5. Manuel dice:

    Hola que tal José me surge un inconveniente con el código no se si podrás solucionarlo lo que pasa que cuando hace el sucess: este ejecuta cualquier xss ósea el usuario envía <a href="">jose</a> y este muestra el link jose
    Se entiende ¿?

  6. coco dice:

    jose una consulta tengo varios formularios dentro de un while con el mismo nombre lo que quiero mandar datos ajax jquery pero pero me toma es solo los datos input del primer form com hacer para que mande los datos de cualquier form que este dentro del while desde ya muchas gracias

  7. Maxuber dice:

    require(‘config.php’); este archivo debe tener los datos de conxión al msql?

    $conexion = mysql_connect($bd_host, $bd_usuario, $bd_password);
    mysql_select_db($bd_base, $conexion);

  8. leudy dice:

    puedo conecta mi base de datos exel

  9. Reynolds dice:

    donde puedo descargar los archivos de ese preyecto??

  10. juan dice:

    src=”js/jquery-1.4.2.min.js”
    src=”js/jquery-ui-1.8.6.min.js”
    Hola solo una pregunta, de donde puedo descargar esta librerias o alguien me las puede pasar.

  11. juan dice:

    src=\"js/jquery-1.4.2.min.js
    src=\"js/jquery-ui-1.8.6.min.js
    Hola solo una pregunta, de donde puedo descargar esta librerias o alguien me las puede pasar.

  12. Enrique dice:

    Hola,
    yo tengo el problema que no me inserta los datos a la base de datos, tengo hecha la conexión pero no me inserta en la tabla. Cuando publico se ve, pero al refrescar desaparece y en mi tabla no está.
    Este es el código:
    <?php
    require_once('config.php');
    mysql_query("SET NAMES 'utf8'");

    $listado = mysql_query("SELECT usuario, texto, date_added from opiniones WHERE date_added

    • Enrique dice:

      que faltaba: $listado = mysql_query(“SELECT usuario, texto, date_added from opiniones WHERE date_added <= now()", $con);

  13. Enrique dice:

    A ver si alguien me puede decir dónde está el error. Gracias de antemano.

  14. Martin Pomares dice:

    buenas buenas!! tengo entendido que lo que quiero hacer es con JS y no tengo idea…

    tengo este form en html

    <form name=\"codigo\" method=\"post\" action=\"enviar.php\">
    <input type=\"text\" name=\"letra\" required=\"required\">
    <input type=\"submit\" name=\"enviar\" value=\"Enviar\">
    </form>

    tengo entendido que el codigo que tengo que usar para que la variable $letra al archivo enviar.php, sin necesidad de clickear en el botón enviar es este:

    onchange=\"document.forms[\"codigo\"].submit();\"

    por lo cual si queda asi:

    <form name=\"codigo\" method=\"post\" action=\"enviar.php\">
    <input type=\"text\" name=\"letra\" required=\"required\">
    <input type=\"submit\" name=\"enviar\" value=\"Enviar\">
    </form>
    <script language=\"JavaScript\">
    onchange=\"document.forms[\"codigo\"].submit();\"
    </script>

    me aparece error en la linea de onchange y si pruebo en localhost no hace nada, tengo que presionar enviar…

    y si pongo de código esto con el document,forms sin las comillas por fuera, asi:

    <form name=\"codigo\" method=\"post\" action=\"enviar.php\">
    <input type=\"text\" name=\"letra\" required=\"required\">
    <input type=\"submit\" name=\"enviar\" value=\"Enviar\">
    </form>
    <script language=\"JavaScript\">
    onchange=document.forms[\"codigo\"].submit();
    </script>

    no me aparece ningun error en netbeans, pero en localhost envia automaticamente apenas carga, por lo cual asumo que el onchange no está funcionando 🙁 alguien me podria ayudar?? Muchas gracias…

  15. rimo ruvbalcaba dice:

    lo que pasa es que al agregar el comentario todo funciona bien pero al presionar f5 o actualizar la web se borran por que sera o como puedo dejar que los comentarios sigan asi como en el ejemplo

    • Jose Aguilar dice:

      Todo apunta a que el insert en la base de datos no se está haciendo correctamente. Podría ser por:

      1- No se está conectando correctamente a la base de datos.
      2- El insert que se intenta ejecutar no es correcto.

      Tendrás que debugar en el archivo php para ver el problema.

      Saludos

  16. RUBEN OSORNIO dice:

    HOLA QUISIERA SABER SI TIENEN UN EJEMPLO DE COMO HICIERON ESTE SISTEMA DE COMENTARIOS?, NO EL DEL EJEMPLO SI NO EL DE TU WEB

  17. juan dice:

    que debe contener el archivo config.php?

    • Jose Aguilar dice:

      Debes añadir las siguientes 2 lineas añadiendo el acceso a la base de datos que estés utilizando:

      $conexion = mysql_connect($bd_host, $bd_usuario, $bd_password);
      mysql_select_db($bd_base, $conexion);

      • juan dice:

        lo tengo igual pero no me guarda los datos al actualizar la pagina,
        acaso me falta algo o hay algo que deba cambiar, disculpa mi ignorancia en
        conexiones con php, pero este post es tan practico que no quisiera irme sin
        tener todo concreto
        gracias de antemano

  18. carlos dice:

    hola
    gracias por el tutorial lo hice y me funciona el script
    pero no me esta insertando los valores en la tabla comments
    que cree detro de mi base de datos

    en la taba he agregdo las filas name text y date_added
    con atribtos varchar pero no me agrega nada
    ara que la inforamcion quede al actualizar

    $insert = mysql_query(“INSERT INTO comments (name, text, date_added) VALUES (‘$name’, ‘$comment’, now())”, $conexion);
    _________________________________________________________________
    $conexion = mysql_connect($servidor, $usuario, $password);
    mysql_select_db($base, $conexion);

  19. carlos dice:

    hola gracias
    lo tengo tal cual y ya los datos al parecer se graban en la tabla de mi base de datos,
    yo uso phpmyadmin y al entrar a examinar mi tabla efectivamente los datos
    están grabados

    el único inconveniente es el que considero mas importante es que, si bien los datos ingresados aparecen en la tabla, estos no se reflejan en el index
    ya que al actualizar no logra postear ningun comentario

    que podria ser? algun error en el html o deberia activar algo en la base de datos?

  20. enmanuel dice:

    cuando envio el comentario este no se inserta y ademas actualiza la pagina en vez de realizarlo de forma asincronica con jquery. que podra ser?

  21. toni dice:

    Me gustó mucho tu sistema de comentarios, pero dado mis pocos conocimientos no supe como utilizarlo, me quedé atascado en la conexión con la base de datos. Tu artículo fuera de mucha más calidad y mucho más universal si hubieras explicado un poco mas detallado como hacer la conexion para que todo funcionara bien. Pues el artículo es para usuarios con algunos conocimientos que yo no poseo.

    DE todas maneras Gracias….Buen aporte 🙂

    • Rafa dice:

      Con todo el respeto compañero, se presupone que si quieres hacer un sistema de comentarios usando php, ajax, y jquery, lo mínimo es que aprendas a como conectar tu archivo a la base de datos, no se pueden explicar cosas tan básicas en cada ejercicio y ojo que yo no soy programador ni estudio para ello, pero conectar a la base de datos…por favor, es como querer hacer correr sin saber andar…el ejemplo está de 10. Un saludo.

      • Santiago dice:

        Tienes razon, alguien que no sepa nada de codigo no va a estar buscando un sistema de comentarios, minimamente deberia saber como funciona MySQL,
        aunque al tutorial si le faltan demaciados datos, uno como desarrollador los completa facilmente.

  22. frank dice:

    hay un problema con la fecha por que cuando se comenta aparece correcto la fecha, el detalle es cuando se recarga la pagina la hora cambia 21 horas
    Y por otro lado cuando agrego un comentario y recargo la pagina no aparece los comentarios agregados

  23. adrian dice:

    muy buen aporte, gracias

  24. Manuel dice:

    Hola.
    Gracias por el aporte.
    Me funciona casi por completo. Inserto lo datos en la base de datos pero no me los muestra sin tener que recargar la página. Qué me falta? Lo tengo tal y como lo ha descrito en su tutorial.
    Muchas gracias por su tiempo.

  25. ZonaLeRoS dice:

    tengo una duda, al insertar este sistema de comentarios, en mi sistema de noticias, osea el que crea la paginas: noticia.php?id=1, y asi, como hago para que solo se muestren los comentarios segun el id del posT !!

    ya cambie los datos para que gurade los ID de cada post o noticia, lo que no entiendo es como hacer para q solo muestre los comentarios de esa noticia o post ??

  26. ZonaLeRoS dice:

    Muchas gracias por el sistema funciona a la perfeccion sin nunguna falla, le adapte para q solo los usuarios registrados puedan comentar e igual funciona bien, solo te pediria que si cuando alguien comentar, haiga la manera de responderle, o agregar la opcion responder al comentar que alguien haga 🙂 !! seria bueno 🙂 !! muchas gracias otra ves 🙂

  27. Rafa dice:

    hola jose, sabes como se podria añadir un sistema de votos a los comentarios? tipo flecha verde y flecha roja para sumar votos positivos y negativos? otra chincheta con este ejemplo, al final vas a copar mis marcadores de chrome jaja un saludo!

  28. Rafa dice:

    probando el sistema de comentarios me funciona todo menos como a algunos de aquí el recargar. Es decir, escribo un comentario y me lo inserta el archivo.php en la base de datos, pero al recargar, mi página principal desaparecen los comentarios… pero en la base de datos se quedan guardados…al final he optado por hacer un buble e imprimir todo en la principal pero no se que he hecho mal. Un saludo.

  29. Cynthia dice:

    Me gustaría poder realizar un buen formulario en mi página

  30. Jesus dice:

    AL RECARGAR DESAPARECE EL COMENTARIO ALGUIEN YA ENCONTRÓ LA SOLUCIÓN?

    • Jose Aguilar dice:

      En la demo hemos quitado el insertar a la base de datos por seguridad pero está explicado como se hace en el tutorial

  31. peyochileno dice:

    No hay algún plugin que logre esto en wordpress?

  32. Alex dice:

    Hola Jose tengo un problema prove este sistema de comentarios y funciona solo que al actualizar la pagina completa se me desaparecen los comentarios que puedo hacer para que eso no suceda?
    gracias:)

    • Jose Aguilar dice:

      HOla,

      Lo primero que tienes que revisar es si el INSERT que se está ejecutando via ajax está funcionando mirando la base de datos si se están registrando los últimos comentarios. Si eso funciona tendrás que revisar la query que retorna los comentarios. Al menos en el ejemplo en funcionamiento está limitado a 20 comentarios.

      Saludos

      • Alexis Ortega dice:

        Hola Jose, gracias por compartir tus conocimientos con nosotros, te comento que me pasa igual que al usuario Alex, revise el código y todo esta igual como en el ejemplo, me puedes indicar cual es el query que retorna los comentarios.
        Muchas Gracias por tu pronta respuesta.

        • Jose Aguilar dice:

          Hola buenos días,

          La query que estamos utilizando en la demo es esta:

          SELECT name, text, DATE_FORMAT(date_added, ‘%d-%m-%Y %H:%i:%s’) as date_show FROM comments ORDER BY date_added DESC LIMIT 0,20

          Saludos

          • Juan Pablo dice:

            Muy buenas, primero que todo darte las gracias por tan excelente tutorial, he seguido los pasos indicados y va de maravilla.

            Al igual que muchos, yo solo tengo un problema, y es que en el momento de actualizar la pagina, el comentario realizado desaparece, he leído todos los comentarios y le dais solución al problema con:

            SELECT name, text, DATE_FORMAT(date_added, ‘%d-%m-%Y %H:%i:%s’) as date_show FROM comments ORDER BY date_added DESC LIMIT 0,20

            Mi duda es como debo resolver esto, es como si hiciera una consulta a la bd para extraer los datos, o se pasa estos valores de alguna forma al script?, estoy perdido en este aspecto, por lo demás de 10 :D, un saludo y espero me podáis echa una mano.

          • Jose Aguilar dice:

            Esa query retorna los últimos 20 comentarios. Solo tienes que procesarla o ejectuarla en tu archivo php y luego hacer un foreach de los resultados.

  33. bryan dice:

    hola , muy buen tutorial , me funciono , y me preguntaba de como podría poner un limite de comentarios , asi como facebook , onda que diga mostrar mas , o mostrar comentarios mas antiguos.

    Yo nose mucho de ajax , me gustaría tener mas o menos una idea de eso :/!!!!

    Gracias por compartir tus conocimientos bro.

    • Jose Aguilar dice:

      hola,

      En la query que muestra los mensajes deberías poner una limitación. Algo asi:

      SELECT * FROM comments WHERE id_product = 10 ORDER BY date_add LIMIT 0,20

      En este caso estoy limitando la consulta a 20 resultados

  34. Juan Pablo dice:

    Hola Jose, gracias por la pronta respuesta.

    Después de mirar el código, estoy volviéndome loco porque realmente no se como aplicar esa query para que muestre los resultados.

    Me dijiste: Solo tienes que procesarla o ejectuarla en tu archivo php.

    He procesado la sentencia: SELECT name, text, DATE_FORMAT(date_added, ‘%d-%m-%Y %H:%i:%s’) as date_show FROM comments ORDER BY date_added DESC LIMIT 0,20

    Sin embargo por mas que la trato no logro mostrar los resultado, y por mas que le doy vueltas no lo consigo (es frustante T_T).

    Podrías si fueras tan amable, de mostrar tu código para ver como lo has aplicado?

    Un saludo y siento las molestias.

  35. José Julián dice:

    Hola José, dices que hay que ejecutar la sentencia SELECT para seleccionar los comentarios de la BD, hasta ahí todo bien la cuestión es que esa sentencia en qué fichero se inserta? en el addcomment.php o en index.php. A mi los comentarios me los inserta de forma perfecta en la base de datos, pero luego no aparecen en ningún siti. El método de AJAX aparte de hacer la insercción en la BD, muestra de forma automática el resultado?

    Gracias y perdona si he dicho alguna barbaridad.

    Saludos.

  36. joel dice:

    Hola, me gusto mucho este sistema, dondde puedo descargar el codigo fuente? es exactamente lo que necesito

  37. heinther dice:

    ¿Cómo se le podría añadir la opción de responder a comentarios?

  38. Kevin dice:

    Si quisiera agregar más datos aparte del nombre y comentario, por ejemplo el correo y sitio web. Como lo haría en….

    var dataString = ‘name=’ + name + ‘&comment=’ + comment;

  39. ricardpo dice:

    amigo disculpa mira soy nuevo pero una vez que ingresa como puedo hacer para que se formatee el formulario talvez me puedes ayudar por favor

  40. Carlos Chavez dice:

    Hola quisiera saber con este mismo ejemplo como hacer para que solo me aparescan los ultimos comentarios por lo menos unos 7 pero tambien pueda ver los anteriores. Gracias de antemano!!!

  41. Marihelena dice:

    Cordial Saludo José, Excelente página, he aprendido mucho gracias a ti, explicas súper bien.
    Con respecto a este código, como haría para que la persona que administra la página pudiera comentar lo que las personas comentan, en mi caso estoy realizando una agencia de viajes, y pues sería conveniente que la persona que venda los viajes o la que este administrando la página pudiera despejarle las dudas a los posibles compradores, o también para que las demás personas miren el grado de satisfacción del viaje, cosas así.
    Como el sistema de comentarios de esta página, es muy bueno y agradable a la vista.
    Me serias de gran ayuda con este problemita jeje.
    Gracias de antemano

  42. Maria dice:

    Muy bueno

  43. Gisell dice:

    Hola.. buenas tardes! una pregunta estoy implementando su sistema de comentario en otro proyecto y pero su index lo eh pasado en mi vista principal, y ya me muestra la vista del index, pero no me guardan los datos en la base de datos, al momento de actualizar se borran los datos que eh capturado..

  44. rafa dice:

    hola jose,primero las gracias por este sistema de comentarios, pero me surge un problema que no consigo resolver, como puedo hacer para que cada pagina de mi web tenga sus propios comentarios, sin que aparezcan los de otras paginas? muchas gracias.

    • Jose Aguilar dice:

      Hola buenos días,

      Para que cada página tenga sus propios comentarios debes condicionar los comentarios según la página. Entiendo que cada página tendrá un identificador único, pues debes añadir un nuevo campo a los comentarios para indicar que son de una página en concreto, como por ejemplo “id_page”. Deberás cambiar el script para rellenar este campo nuevo y cambiar la query para que solo muestre los comentarios de la página que se está viendo.

      Saludos

  45. DAVID dice:

    Buen día: muchas gracias por este grandioso material, a mi me sucede lo siguiente, resulta que al conectar con la base de datos me aparece sino e solo el titulo del site sin el formulario. Que podría ser ?

    • DAVID dice:

      hola, ya logre que saliera todo mi contenido, el problema que tengo es que no me guarda los comentarios, es decir, al refrescar la pagina se borran todos los comentarios, Agradezco mucho tu ayuda, Gracias !!

      • Jose Aguilar dice:

        Deberás hacer debug en tu script y revisar que la query que utilizas para hacer el insert en la base de datos sea correcta. Para debugar las querys yo lo que suelo hacer es imprimirlas por pantalla con un echo y luego ir a la base de datos a ejecutarla para revisar que problema tiene.

    • Jose Aguilar dice:

      Hola buenos días,

      Sin ver el código que utilizas será muy difícil darte una respuesta acertada. Si nos facilitas un enlace y el código que utilizas quizá podamos ayudarte mejor.

      Saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.