Przesyłanie formularzy AJAX w jQuery Mobile

Question

Próbuję przesłać prosty formularz logowania przez ajax na stronie jQuery Mobile, ale mam problem.

Wygląda na to, że po przesłaniu formularza (za pośrednictwem POST) parametry formularza są dodawane do adresu URL. Co więcej, wymazują zakotwiczoną stronę, na której byłem przed złożeniem formularza.

Na przykład, jestem na stronie localhost:8080/myapp/#sign_up

Potem przesłać formularz powodując url stać: localhost:8080/myapp/?email=a@a.com&pass=pass

więc jeśli uderzę błędy sprawdzania poprawności i kliknij przycisk „Wstecz”, I don” wróć na stronę #sign_up.

Wszelkie pomysły?

Answer 1

Jeśli obsługiwać przesyłanie formularza z niestandardowych submit obsługi zdarzeń można obsługiwać walidacji na tej samej stronie:

//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 
    }); 
}); 

aby zatrzymać jQuery Mobile, uruchamianie własnego AJAX sumbission swojej postaci umieścić to na tagu formularza :

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

Answer 2

Jeśli chcesz przesłać formularz i nie używać ajax (co jest domyślne) należy dodać „dane-ajax =«false»” do formularza wyrażenie:

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

Answer 3

Rozwiązanie Jaspersa powyżej sprawdziło się u mnie! Jedyne, co musiałem zmienić, to zastąpienie .live przez .submit (.live jest teraz przestarzałe). Teraz jest to takie:

$('#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 
    }); 
});