Отправить форму без обновления / перенаправления текущей страницы (Python (Django) + jQuery + Ajax)

Question

Любой способ отправить форму без обновления текущей страницы с использованием Python с jQuery Ajax?Я хочу, чтобы конечные результаты были похожи на то, как работает комментарий Facebook.

В настоящее время я использую форму jQuery для выполнения Ajax.Однако это не дает мне удобного пользовательского интерфейса, потому что:

1. После отправки с использованием формы jQuery URL-адрес в адресной строке обновился до формы, которую я отправил.

2. Это действительно обновило страницу.Мне это особенно не нравится, допустим, я внизу страницы прокрутил до максимума.После отправки формы она обновила страницу, и фокус был перенаправлен в верхнюю часть страницы.

Надеюсь, я ясно дал понять, чего хочу.Мне нужно что-то вроде системы комментариев Facebook.Кто-то прокомментировал, а затем комментарий был отправлен без какого-либо обновления страницы.

РЕДАКТИРОВАТЬ

jQuery код:

$('#review_submit').submit(function() { 
        var options = {};           
        $(this).ajaxSubmit(options);
        return false; 
});



    $('[name=submit_review_btn]').click(function(){                      
        $('#review_submit').submit();
    });

Итаккод Python для обработки отправки должен будет перенаправить страницу со своего кода на стороне сервера, поэтому перенаправьте страницу по этому URL-адресу, main_URL.com

При показанных кодах jQuery получаются следующие результаты:

1. URL-адрес появился в адресной строке: main_URL.com/ form_action_url <--- Это действие формы, которое я настроил для отправки формы. </p>

2. Страница перенаправлена ​​на страницу, которую я установил на стороне сервера.

Я запутался с этим опытом Ajax.

Answer 1

Вы могли бы справиться с этим, вместо использования формы jquery, используя ajaxPost jquery.Это позволит вам .serialize() заполнить форму (чтобы получить параметры) и иметь возможность вернуться к функции JS, чтобы делать то, что вы хотите после «отправки формы».Проверить jQuery.post()

jsFiddle

Это не обновит страницу, поскольку сообщение происходит через вызов AJAX.Это позволяет вам запускать функцию после того, как сообщение проходит, и делать то, что вы хотите (если сообщение возвращает данные, оно будет доступно здесь ... если вы хотите сделать еще один GET или POST после того, как это было успешно,это можно сделать здесь ... и так далее и тому подобное)

Answer 2

Было бы проще ответить, если бы вы опубликовали свой код JavaScript.

Вы отправляете форму с кнопкой Отправить? Если это так, то jQuery Form должен обрабатывать все и НЕ обновлять страницу.

Если вы отправляете форму в JavaScript, ваш код должен выглядеть как в примерах jQuery Form:

// attach handler to form's submit event 
$('#myFormId').submit(function() { 
    // submit the form 
    $(this).ajaxSubmit(); 
    // return false to prevent normal browser submit and page navigation 
    return false; 
});

return false; очень важен здесь. В противном случае пользователь будет перенаправлен.

Чтобы ваша система работала, вам нужно сделать это в 2 этапа:

1. оставить комментарий
2. добавить комментарий к остальным комментариям (или получить новые комментарии с сервера, а затем добавить)

Так выглядит ваша текущая настройка?

Answer 3

У меня очень динамичный сайт, который использует эту технологию повсеместно.Мы используем додзё, но принципы те же.Как сказано выше, ваша форма должна иметь onsubmit = "return false;"в качестве атрибута (или в объекте формы, который он представляет), чтобы страница не перезагружалась.

На стороне сервера мы не используем перенаправление, а отвечаем JSON (или XML, или что-то еще) и сообщаем обработчику ответа (jQuery, Dojo и т. Д.), Что делать дальше.

В большинстве случаев процесс выглядит так:

1. Отправка формы с вызовом xhrPOST
2. Работа на сервере
3. Возврат JSON/ xml / text
4. Обработка этого возвращаемого значения и наличие javascript определяют, что делать

Конкретный пример выглядит примерно так:

1. Пользователь отправляет пациентаvitals
2. Сервер проверяет и возвращает {success: "Vitals получили."} или {error: "Invalid number"}
3. Обработчик обратного вызова javascript xhr определяет, что делать дальше (закрыть диалоговое окно,обновить форму для новой записи или обратить внимание на отсутствующее поле)

Редактировать: Ссылка на некоторые веб-фреймворки Python: ссылка

Ссылка на базовуюучебник по возвращению JSON в Django (с JQuery) ссылка

Еще одно примечание: когда вы используете JSON, технически больше не AJAX, так как X стоитдля XML.