Presentación de formulario AJAX en jQuery Mobile

Question

Estoy tratando de enviar un formulario de inicio de sesión simple a través de ajax en un sitio jQuery Mobile pero estoy teniendo problemas.

Parece que cuando envío el formulario (a través de POST), los parámetros del formulario se están agregando a la url. No solo eso, borran la página anclada en la que estaba antes del envío del formulario.

Por ejemplo, estoy en la página localhost:8080/myapp/#sign_up

Entonces envíe el formulario haciendo que la url para convertirse: localhost:8080/myapp/?email=a@a.com&pass=pass

Así que si golpeo errores de validación y haga clic en un botón de 'atrás', I don' volver a la página #sign_up.

¿Alguna idea?

Answer 1

Si controla el envío de formularios con un controlador de eventos personalizado submit que puede manejar la validación en la misma página:

//bind an event handler to the submit event for your login form 
$(document).on('submit', '#form_id', function (e) { 

    //cache the form element for use in this function 
    var $this = $(this); 

    //prevent the default submission of the form 
    e.preventDefault(); 

    //run an AJAX post request to your server-side script, $this.serialize() is the data from your form being added to the request 
    $.post($this.attr('action'), $this.serialize(), function (responseData) { 

     //in here you can analyze the output from your server-side script (responseData) and validate the user's login without leaving the page 
    }); 
}); 

Para detener jQuery Mobile se ejecute su propio sumbission AJAX de su formulario de poner esto en su etiqueta de formulario :

<form data-ajax="false" action="..."> 

Answer 2

Si desea enviar un formulario y no utilizar Ajax (que es por defecto) debe agregar 'datos-ajax = "false"' a su forma de cadena:

<form data-ajax="false" action="test.php" method="POST"> 

Answer 3

¡La solución de Jaspers anterior funcionó para mí! Lo único que tuve que ajustar fue reemplazar .live con .submit (.live ahora está en desuso). Así que ahora es así:

$('#form_id').submit(function (e) { 

    //cache the form element for use in this function 
    var $this = $(this); 

    //prevent the default submission of the form 
    e.preventDefault(); 

    //run an AJAX post request to your server-side script, $this.serialize() is the data from your form being added to the request 
    $.post($this.attr('action'), $this.serialize(), function (responseData) { 

     //in here you can analyze the output from your server-side script (responseData) and validate the user's login without leaving the page 
    }); 
});