Cómo enviar comentarios con jQuery y AJAX

En este tutorial vas a aprender como crear un formulario que permite agregar comentarios al usuario sin recargar la página. Para conseguirlo, estoy usando las tecnologías jQuery, AJAX, JSON y PHP.

En prácticamente todas las Webs con interacción 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 quieres optimizar este sistema y hacer que sólo se cargue el comentario enviado sin tener que recargar la página por completo puedes utilizar la tecnología jQuery y Ajax.

Dentro de la cabecera de tu página o dentro de la etiqueta <head> añade la librería jQuery y los estilos necesarios para cambiar el aspecto:

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>

También en el <head> puedes incluir el código jQuery que hará la llamada mediante el método AJAX y JSON:

<script type="text/javascript">
$(document).ready(function() {
    $("#submitComment").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();
 
        if (name === '') {
            alert('Debes añadir un nombre.');
            return false;
        }
 
        if (comment === '') {
            alert('Debes añadir un comentario.');
            return false;
        }
 
        var dataString = 'name=' + name + '&comment=' + comment;
 
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "process.php",
            data: dataString,
            success: function(response) {
                if (response) {
                    $('#new-comment').show();
                    $('#new-comment').find('#author-name').text(response.name);
                    $('#new-comment').find('.comment-text').text(response.comment);
                    $('#new-comment').find('#date-show').text(response.date_show);
                }
            }
        });
        return false;
    });
});
</script>

Como puedes observar, el código anterior espera a que se haga click en botón o enlace con id=»submitComment» donde se recogen las variables «name» y «comment» que son los datos depositados en el formulario. Reconstruimos una fecha para mostrar y generamos otra variable «dataString» que se rellena con los datos enviados desde el formulario para luego pasárselo al archivo process.php usando la técnica AJAX con tipo de datos de retorno JSON.

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

<?php
require('config.php');
 
$name = strip_tags(utf8_decode($_POST['name']));
$comment = strip_tags(utf8_decode($_POST['comment']));
 
$insert = $conexion->query('INSERT INTO comments (name, text, date_added) VALUES ("'.$name.'", "'.$comment.'", now())');
 
if ($insert) {
    $row = array(
        'name' => $name,
        'comment'=> $comment,
        'date_show' => date('d/m/Y H:i:s')
    );
    echo json_encode($row);
}
?>

El archivo config.php que se está incluyendo en la primera linea se encarga de crear la conexión con la base de datos.

Su contenido es tan solo:

<?php
$conexion = new mysqli('localhost', 'USUARIO DE TU BASE DE DATOS', 'CONTRASEÑA DE TU BASE DE DATOS', 'NOMBRE DE TU BASE DE DATOS');
?>

Aquí tendrás que rellenar los datos de conexión con tu base de datos.

Seguidamente, recogemos mediante el método POST los datos del formulario que le hemos pasado mediante las técnicas AJAX.

Finalmente, realizamos una inserción con la información recibida en la tabla «comments» que debes tener en tu base de datos.

Una vez se ha realizado esta operación, es cuando se ejecuta el success que hay dentro de la llamada AJAX, donde simplemente estoy rellenado con la función append() un contenedor con id=»new-comment» que hay al final de los comentarios con las etiquetas vacías.

En el cuerpo de la página o dentro de la etiqueta <body> debes agregar el código que lee de la base de datos los 10 últimos comentarios para mostrarlos en pantalla:

<div id="content" class="col-lg-12">
    <h2>Comentarios</h2>
    <?php
    $result = $conexion->query(
        '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,10'
    );
    if ($result->num_rows > 0) {
        ?>
        <div class="row items">
            <?php while ($row = $result->fetch_assoc()) { ?>
                <div class="col-lg-12">
                    <div class="comment">
                        <div class="row">
                            <div class="col-lg-2 comment-avatar">
                                <img class="img-fluid" width="250" height="250" src="images/user.png" />	
                            </div>
                            <div class="col-lg-10">
                                <div class="comment-autor">
                                    <strong><?php echo $row['name']; ?></strong> dice:<br/>
                                    <small><?php echo $row['date_show']; ?></small>
                                </div>
                                <div class="comment-text"><?php echo nl2br($row['text']); ?></div>
                            </div>
                        </div>
                    </div>
                </div>
            <?php } ?>
            <div id="new-comment" class="col-lg-12" style="display:none;">
                <div class="comment">
                    <div class="row">
                        <div class="col-lg-2 comment-avatar">
                            <img class="img-fluid" width="250" height="250" src="images/user.png" />	
                        </div>
                        <div class="col-lg-10">
                            <div class="comment-autor">
                                <strong><span id="author-name"></span></strong> dice:<br/>
                                <small><span id="date-show"></span></small>
                            </div>
                            <div class="comment-text"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <?php } ?>
</div>

Si te fijas bien en el código anterior, puedes observar el contenedor con id=»new-comment» con las etiquetas vacías que serán rellenadas en el success de la llamada AJAX cada vez que se agregue un nuevo comentario.

El formulario para permitir al usuario enviar un comentario es muy sencillo, sería algo como lo siguiente:

<h2>Envia un comentario con JQUERY/AJAX</h2>
<div id="register_form" class="row">
    <div class="col-lg-12">
        <form method="post">
            <div class="form-group">
                <label for="name">Nombre</label>
                <input type="text" class="form-control" name="name" id="name" placeholder="Tu nombre">
            </div>
            <div class="form-group">
                <label for="comment">Comentario</label>
                <textarea class="form-control" name="comment" id="comment" rows="3"></textarea>
            </div>
            <button type="button" id="submitComment" class="btn btn-primary">Enviar</button>
        </form>
    </div>
</div>

Tan solo he agregado un campo para poner un nombre y texto.

Ver demo Descargar

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 (35 votos, promedio: 4,66 de 5)
Cargando…
Comparte en las redes sociales

88 respuestas a “Cómo enviar 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.

Ver más sobre