Modal Bootstrap Ajax

<?php

if ( isset($_POST['nome']) ){
    echo json_encode($_POST);
    exit;
}

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Exemplo usando Select2</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" />
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){

            $('form').on('submit', function(e){
                e.preventDefault();
                FormData = $(this).serialize();
                $.ajax({
                    url: 'modal.php',
                    type: 'POST',
                    cache: false,
                    dataType: 'json',
                    data: FormData,
                    beforeSend: function(){
                        $('button[name=submit] i').addClass('fa fa-spinner fa-spin');
                    },
                    success: function(data){
                        $('button[name=submit] i').removeClass('fa fa-spinner fa-spin');
                        $('#nome').html(data.nome);
                        $('#email').html(data.email);
                    }
                });
                return false;
            });

        });
    </script>
</head>
<body>
    <div class="container">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Open Modal</button>
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form method="POST">
                        <div class="modal-body">
                            <div class="form-group">
                                <label for="nome">Nome</label>
                                <input type="text" name="nome" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="nome">Email</label>
                                <input type="text" name="email" class="form-control">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="submit" name="submit" class="btn btn-dark w-40">
                                <i></i>
                                Enviar
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <h2>Nome: <span class="badge badge-primary badge-lg" id="nome"></span></h2>
        <h2>Email: <span class="badge badge-success" id="email"></span></h2>
    </div>
</body>
</html>