Отправка формы AJAX в jQuery Mobile

Question

Я пытаюсь отправить простую форму входа через ajax на сайте jQuery Mobile, но у меня возникают проблемы.

Кажется, что когда я отправляю форму (через POST), параметры формыдобавляется в URL.Мало того, они стирают привязанную страницу, на которой я был до отправки формы.

Например, я на странице localhost:8080/myapp/#sign_up

Затем я отправляю форму, в результате чего URL становится:localhost:8080/myapp/?email=a@a.com&pass=pass

Так что, если я нажму на ошибки проверки и нажму кнопку «назад», я не вернусь на страницу #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
    });
});

Чтобы запретить jQuery Mobile запускать собственную AJAX-версию вашей формы, укажите это в теге формы:

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

Answer 2

Решение Ясперса выше работало для меня!Единственное, что мне пришлось настроить, - это заменить .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
    });
});

Answer 3

Если вы хотите отправить форму и не использовать ajax (который используется по умолчанию), вы должны добавить 'data-ajax = "false" в строку формы:

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