error con serialize() en AJAX de jQuery

[berkeleyPunk]

Hola!

Hago pruebas con AJAX en jQuery, específicamente con la función serialize().

Código HTML:

<form id="mi_formulario">
        <input id="nombre" name="nombre">
        <input id="email"  name="email">
        <br>
        <button id="submit">Enviar</button>
    </form>
 

Código Javascript:

$(document).ready(function() {
            $("#submit").click(function() {
                var datosSerializados = $("#mi_formulario").serialize();
 
                $.ajax({
                    type: "POST",
                    data: datosSerializados,
                    url:  "process.php",
                    success: function(response) {
                        alert(response);
                    },
                    error: function() {
                        alert("Error desconocido");
                    }
                });
            });
        });
    </script>
 

Contenido del process.php

Código PHP:

  $nombre = $_POST["nombre"];
$email  = $_POST["email"];
$respuesta = $nombre . " " . $email;
echo "Respuesta AJAX, OK\nDatos introducidos: " . $respuesta; 
   

La primera vez que se da click en el submit salta el error. La segunda, todo funciona ok.

¿Por qué?