mostrar mensaje usando un formulario + ajax + php

[mensajeescrito]

Hola amigos verán tengo este código con el cual intento enviar "mensajes" mediante un

formulario (archivo 1), a otro archivo php (archivo 2).

Y posteriormente , automáticamente muestre el mensaje enviado en

una caja que esta situada justo arriba del formulario (archivo 1).

Pero no me funciona y no se que falla, si me pudieran ayudar les estaria muy agradecido.

Este es el codigo

archivo 1:

Código Javascript:

$("#btn_enviar_mensaje").click(function(){
                    
                    $.ajax(
                    
                        {
                            url: "php/historial_mensajes.php",
                            type: 'post',
                            data: data, 
 
                            success: function(result){
                                
                                  $("#historial_mensajes").html(result);
                             }  
                             
                         }
 
                     );
                    
                });
                
            });
 

Código HTML:

<div id="historial_mensajes"></div>
 
<form>
 
<input type="text" name="mensaje" autofocus class="inputstyle" id="mensaje" 
        
                            placeholder="Mi mensaje"/>
 
<button id="btn_enviar_mensaje">Enviar mensaje</button>
 
</form>
 

archivo 2 llamado "historial_mensajes.php"

Código PHP:

$mensaje = trim(($_POST['mensaje']));
    
    echo 'Mensaje: ' . $mensaje . '<br/><br/>';
 

[rottenp4nx]

que datos lleva la variable data en el js ? creo que está el evento submit para los formularios, no sé si existirá todavía en jquery

Saludos

[mensajeescrito]

hola rottenp4nx que tal y a todos.

pues veran lo he solucionado ya funciona, pero ahora lo que necesito es que me muestre los resultados en orden inverso.

es decir el ultimo mensaje mandado que aparezca arriba del todo en la lista de mensajes.

el codigo que tengo que funciona es el siguiente.

creo que deveria utilizarse "reverse()", pero no me funciona si me pudieran ayudar les estaria muy agradecido.

Código Javascript:

$(document).ready(function(){
    
    $("#submit").click(function(){
            
        var mensaje = $("#mensaje").val();
        
        
        //Devuelve mensaje de 'exito' cuando la información se almacena en la base de datos.
        var dataString = 'mensaje='+ mensaje;
        
        
        if(mensaje=='') {
            
            alert("Rellena el campo antes de hacer click en enviar");           
        } 
        
        else 
        
        {
                    
            // Codigo ajax del formulario
            $.ajax({
                
                type: "POST",
                url: "ajaxsubmit.php",
                data: dataString,
                cache: false,
                
                success: function(resultados){
                        
                    var historial = $('#historial_mensajes').html();
                    
                    $('#historial_mensajes').html(historial + '<p>' + resultados + '</p>'); 
                }
        
            });
        }
        
        return false;
    
    });
 
});
 

[diurno10]

probaste con append

Código Javascript:

$('#historial_mensajes').append('<p>' + resultados + '</p>');
 

Esto deberia mantener lo que habia y agregarle los datos nuevos al final.