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

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

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

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

Затем я отправляю форму, в результате чего URL-адрес становится: localhost:8080/myapp/[email protected]&pass=pass

Поэтому, если я столкнусь с ошибками проверки и нажму кнопку «Назад», я не вернусь обратно на страницу #sign_up.

Любые идеи?


jquery-validate jquery-mobile ajaxform
person Gerard    schedule 04.11.2011    source источник

Ответы (3)


arrow_upward
15
arrow_downward

Если вы обрабатываете отправку формы с помощью специального обработчика событий 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="...">
person Jasper    schedule 04.11.2011
comment
Будем признательны за любые отзывы об отрицательном голосовании. Я просто хочу знать, что я делаю не так :) - person Jasper; 23.05.2013
comment
я бы тоже ;-) возможно, единственное, что "live" теперь устарело, и вместо этого вы должны использовать "on". возможно, даже «вкл/выкл» последовательно, чтобы предотвратить дублирование событий: stackoverflow.com/questions/9067259 - person Simon_Weaver; 15.04.2014

arrow_upward
3
arrow_downward

Решение 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
    });
});
person jampafoo    schedule 15.08.2013
comment
Примечание по этому поводу: если форма загружается в DOM как внешняя страница, ее необходимо запустить после того, как это произойдет. Вот почему я бы предложил использовать делегированный обработчик событий, чтобы обработчик событий перехватывал событие, даже если форма была добавлена ​​в DOM после начальной загрузки страницы. - person Jasper; 24.04.2014

arrow_upward
0
arrow_downward

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

 <form data-ajax="false" action="test.php" method="POST">
person Miriam P. Raphael    schedule 22.05.2013
comment
Это часть ответа выше, не возражаете, если я спрошу, почему вы повторно разместили его? - person Jasper; 24.05.2013