Как сделать обратный вызов Jquery после отправки формы?
У меня есть простая форма с remote=true.
эта форма фактически находится в диалоговом окне HTML, которое закрывается, как только нажимается кнопка отправки.
теперь мне нужно внести некоторые изменения на главной странице HTML после того, как форма будет успешно отправлена.
я попробовал это с помощью jQuery. Но это не гарантирует, что задачи будут выполнены после некоторой формы ответа на отправку формы.
$("#myform").submit(function(event) {
// do the task here ..
});
Как мне прикрепить обратный вызов, так что мой код выполняется только после успешной отправки формы? Есть ли способ добавить некоторые .успешный или. полный обратный вызов формы?
6 ответов:
Я только что сделал это -
$("#myform").bind('ajax:complete', function() { // tasks to do });
и все работало отлично .
посмотреть эта документация api для более конкретных деталей.
Я не мог получить номер один upvoted решение для надежной работы, но нашел это работает. Не уверен, требуется ли это или нет, но у меня нет атрибута действия или метода на теге, который гарантирует, что сообщение обрабатывается $.функция ajax и дает вам возможность обратного вызова.
<form id="form"> ... <button type="submit"></button> </form> <script> $(document).ready(function() { $("#form_selector").submit(function() { $.ajax({ type: "POST", url: "form_handler.php", data: $(this).serialize(), success: function() { // callback code here } }) }) }) </script>
вам придется делать все вручную с помощью AJAX-вызова на сервер. Это потребует от вас переопределить форму, а также.
но не волнуйтесь, это кусок пирога. Вот обзор того, как вы будете работать с вашей формой:
- переопределить действие отправки по умолчанию (благодаря переданному объекту события, который имеет
preventDefault
способ)- возьмите все необходимые значения из формы
- огонь от HTTP запрос
- обрабатывать ответ на запрос
во-первых, вам придется отменить действие отправки формы следующим образом:
$("#myform").submit(function(event) { // Cancels the form's submit action. event.preventDefault(); });
а затем, захватить значение данных. Давайте просто предположим, что у вас есть одно текстовое поле.
$("#myform").submit(function(event) { event.preventDefault(); var val = $(this).find('input[type="text"]').val(); });
а затем запустить запрос. Давайте просто предположим, что это почтовый запрос.
$("#myform").submit(function(event) { event.preventDefault(); var val = $(this).find('input[type="text"]').val(); // I like to use defers :) deferred = $.post("http://somewhere.com", { val: val }); deferred.success(function () { // Do your stuff. }); deferred.error(function () { // Handle any errors here. }); });
и это стоит сделать.
примечание 2: для разбора данных формы предпочтительно, чтобы вы используете плагин. Это сделает вашу жизнь действительно легкой, а также обеспечит приятную семантику, которая имитирует фактическую форму отправки действия.
примечание 2: вы не должны использовать откладывает. Это просто личные предпочтения. Вы также можете сделать следующее, И это тоже должно работать.
$.post("http://somewhere.com", { val: val }, function () { // Start partying here. }, function () { // Handle the bad news here. });
Я не верю, что есть callback-функция, как вы описали.
что нормально здесь, чтобы сделать изменения с помощью некоторых серверных языков, таких как PHP.
в PHP вы можете, например, извлечь скрытое поле из своей формы и внести некоторые изменения, если оно присутствует.
PHP:
$someHiddenVar = $_POST["hidden_field"]; if (!empty($someHiddenVar)) { // do something }
один из способов сделать это в Jquery-использовать Ajax. Вы можете прослушать submit, return false, чтобы отменить его поведение по умолчанию и использовать jQuery.post() вместо этого. jQuery.сообщение имеет успех-обратный вызов.
$.post("test.php", $("#testform").serialize(), function(data) { $('.result').html(data); });
для MVC здесь был еще более простой подход. Вам нужно использовать форму Ajax и установить AjaxOptions
@using (Ajax.BeginForm("UploadTrainingMedia", "CreateTest", new AjaxOptions() { HttpMethod = "POST", OnComplete = "displayUploadMediaMsg" }, new { enctype = "multipart/form-data", id = "frmUploadTrainingMedia" })) { ... html for form }
вот код отправки, это в разделе документ готов и связывает событие onclick кнопки, чтобы отправить форму
$("#btnSubmitFileUpload").click(function(e){ e.preventDefault(); $("#frmUploadTrainingMedia").submit(); });
вот обратный вызов, на который ссылается AjaxOptions
function displayUploadMediaMsg(d){ var rslt = $.parseJSON(d.responseText); if (rslt.statusCode == 200){ $().toastmessage("showSuccessToast", rslt.status); } else{ $().toastmessage("showErrorToast", rslt.status); } }
в методе контроллера для MVC это выглядит так
[HttpPost] [ValidateAntiForgeryToken] public JsonResult UploadTrainingMedia(IEnumerable<HttpPostedFileBase> files) { if (files != null) { foreach (var file in files) { // there is only one file ... do something with it } return Json(new { statusCode = 200, status = "File uploaded", file = "", }, "text/html"); } else { return Json(new { statusCode = 400, status = "Unable to upload file", file = "", }, "text/html"); } }