Not sending mail AJAX/PHP with modal no page refresh

I'm new. I have been searching and researching to make my AJAX send my form after submit and making a modal appear, I have figured out the modal to appear and make the page not refresh, and at one point I made the form send to my mail, but now I don't know what I did and I am so confuse, so if somebody can help or share a link and read it I would appreciate it :D. I'm using bootstrap. Thanks very much for reading. :D

Here is my HTML in the body (I have the javascripts all linked)

<div class="row">
        <div class="col-lg-6 col-md-6 col-sm-12">
            <form id="miformulariopers" method="post" action="php/sendmail.php" role="form">
            <div class="form-group">
                <label for="nombre">Nombre</label>
                <input type="text" class="form-control" id="nombre" name="nombre" placeholder="Tu nombre">
            </div>
            <div class="form-group">
                <label for="apellido">Apellido</label>
                <input type="text" class="form-control" id="apellido" name="apellido" placeholder="Tu apellido">
            </div>
            <div class="form-group">
                <label for="exampleInputEmail1">Email</label>
                <input type="email" class="form-control" id="exampleInputEmail1" name="mail"placeholder="Tu correo">
            </div>
            <div class="form-group">
                <label for="InputMessage">Mensaje</label>
                <textarea class="form-control" rows="3" placeholder="Tu mensaje" id="InputMessage" name="mensaje"></textarea>
            </div>
            <div class="form-group">
                <button id="buttonright" type="submit" class="btn btn-default" data-toggle="modal">Submit</button>
            </div>
            </form>
        </div>

This is my PHP:

<?php
$destinatario = 'mymail@gmail.com';
$nombre = $_POST['nombre'];
$apellido = $_POST['apellido'];
$mail = $_POST['mail'];
$asunto = 'Correo de la web';
$mensaje = $_POST['mensaje'];
$cabeceras = 'From: webmaster@example.com' . "\r\n" .
'Reply-To: webmaster@example.com' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
?>
<?php
$success = mail($destinatario, $asunto, $nombre, $apellido, $mail, $mensaje, $cabeceras);
if ($success) {
    echo '<h1>Envío realizado</h1>';
    echo '<p>Personaliza tu mensaje aquí. Respetando las etiquetas "p"</p>';
} else {
    echo '<p><strong>Error al enviar el mensaje. Inténtelo de nuevo.</strong></p>';
}
?>

And my JS and AJAX:

$("#miformulariopers").submit(function () {
  event.preventDefault();
  $("#message").modal('show');

});
$("#buttonright").click(function () {
$.ajax({
        type : "POST",
        url : "php/sendmail.php",
        data: '#miformulariopers'.serialize(),
        dataType: "json",

        });
        });