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/>';