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 - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (34 votos, promedio: 4,65 de 5)
Cargando…
Comparte en las redes sociales

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

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

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

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

  4. Maria dice:

    Muy bueno

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

  6. 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!!!

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.