jQuery Mobile에서 AJAX 양식 제출

Question

jQuery Mobile 사이트에서 ajax를 통해 간단한 로그인 양식을 제출하려고하는데 문제가 있습니다.

양식을 제출할 때 (POST를 통해) 양식 매개 변수가 URL에 추가되는 것 같습니다. 뿐만 아니라 양식 제출 전에 있던 고정 된 페이지를 지 웁니다. '나는 돈, 내가 유효성 검사 오류에 충돌한다면 localhost:8080/myapp/?email=a@a.com&pass=pass

을하고'뒤로 '버튼을 클릭

예를 들어, 나는 그런 localhost:8080/myapp/#sign_up

내가되기 위해 URL을 일으키는 원인이되는 양식을 제출 페이지에있어 #sign_up 페이지로 돌아갑니다.

아이디어가 있으십니까?

Answer 1

당신은 당신이 동일한 페이지에 유효성 검사를 처리 할 수있는 사용자 정의 submit 이벤트 핸들러와 양식 제출 처리 할 경우

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

이 양식 태그에 넣어 양식 자체 AJAX의 sumbission를 실행 jQuery를 모바일을 중지하려면를 :

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

Answer 2

당신이 '데이터 아약스 = "false"를'양식 문자열에 추가해야합니다 (기본값 인) 아약스를 사용하여 양식을 제출하지하려면 :

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

Answer 3

위의 Jaspers 솔루션이 저에게 효과적이었습니다! 내가 조정해야 할 유일한 것은 .live를 .submit (.live는 현재 사용되지 않음)으로 대체하는 것입니다. 이제는 다음과 같습니다 :

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