Вопрос по javascript, asp.net, html, jquery, webforms – Как сделать обратный вызов Jquery после отправки формы?

112

У меня есть простая форма с remote = true.

Эта форма фактически находится в диалоге HTML, который закрывается, как только нажимается кнопка «Отправить».

Теперь мне нужно внести некоторые изменения на главной HTML-странице после успешной отправки формы.

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

$("#myform").submit(function(event) {

// do the task here ..

});

Как прикрепить обратный вызов, чтобы мой код выполнялся только после успешной отправки формы? Есть ли способ добавить какой-либо обратный вызов .success или .complete в форму?

@Pere Не правда здесь в будущем. SparK
Давидбузатто, есть некоторые случаи, когда вы не можете использовать ajax. Например, когда вы хотите загрузить файл. Pere
Почему вы не используете Ajax? С помощью функций jQuery Ajax вы можете определять такие обратные вызовы. davidbuzatto

Ваш Ответ

6   ответов
0
$("#formid").ajaxForm({ success: function(){ //to do after submit } });
Это действительно плагин.malsup.com/jquery/form
ЯвляетсяajaxForm() сторонний компонент, который вы установили? Это не стандартная часть jQuery.
107

 $("#myform").bind('ajax:complete', function() {

         // tasks to do 


   });

И все работало отлично.

Увидетьэта документация API для более конкретной информации.

И если<form> субмитируется обычно? (Я имею в виду не с Ajax) Что я могу поставить в первом аргументе.bind() ? РЕДАКТИРОВАТЬ: ну, я думаюclick, Нвм, извините. :п
Вау ... Я только что узнал что-то новое. Да, судя по всему, это самое простое решение. Возможно, это даже самое лучшее. Я заядлый читатель Coding Horror, и в этом блоге Джефф Этвуд подчеркивает, что мы должны писать меньше кода, и этот метод достигает этого. Хорошая находка. :)
& quot; Начиная с jQuery 1.8, метод .ajaxComplete () должен быть прикреплен только к документу & quot;
Не работал со мной, используя обычную форму, с кнопкой, но кнопка вызывает javascript $ (& # apos; # formFile & ap;;). Submit ();
будьте осторожны: это выполнит вашу функцию после завершенияany событие ajax, а не только отправка вашей формы (если я не ошибаюсь, в таком случае я бы хотел, чтобы вы предоставили ссылку на то, где вы нашли это)
28

чтобы решение номер один проголосовало надежно, но нашел, что это работает. Не уверен, требуется ли это или нет, но у меня нет атрибута действия или метода в теге, который обеспечивает обработку POST функцией $ .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>
javascript без точек с запятой ... некоторые люди просто хотят посмотреть, как горит мир. Ваше решение работает, хотя, так что спасибо :)
+1. Ключ к этому ответу является$(this).serialize() линия. Это позволяет вам использоватьjQuery.ajax() отправить существующую форму в фоновом режиме, затем перехватить ответ с сервера и что-то с ним сделать.
Реквизит для использования$(this).serialize(), это решило мои проблемы!
Обратите внимание, что.serialize не включает файловые входы в ваш запрос POST. Используйте HTML5 FormData (см.this question) вместо этого, если вы не поддерживаете старые браузеры, такие как IE & lt; 9
что такое "form_selector" в вашем HTML, что вы ссылаетесь в JS?
24

то потребует от вас также переопределить форму.

Но не волнуйтесь, это кусок пирога. Вот краткий обзор того, как вы будете работать с вашей формой:

override the default submit action (thanks to the passed in event object, that has a preventDefault method) grab all necessary values from the form fire off an HTTP request handle the response to the request

Во-первых, вам придется отменить действие отправки формы следующим образом:

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

А затем выстрелить запрос. Давайте просто предположим, что это запрос POST.

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

И это должно примерно сделать это.

Note 2: Для анализа данных формы предпочтительно, чтобы вы использовалиплагин, Это сделает вашу жизнь по-настоящему легкой, а также обеспечит хорошую семантику, которая имитирует фактическое действие отправки формы.

Note 2: Вам не нужно использовать отсрочку. Это просто личное предпочтение. Вы также можете сделать следующее, и это должно сработать.

$.post("http://somewhere.com", { val: val }, function () {
    // Start partying here.
}, function () {
    // Handle the bad news here.
});
Отличный образец. Как сделать то же самое с загрузкой файлов (multi-part / form-data) ???
8

Вам нужно использовать форму 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");
    }
}
Это действительно не является хорошей причиной для того, чтобы проголосовать за это. Ответ работает и может помочь разработчику .NET, который сталкивается с той же проблемой.
Эти коды являются .Net-кодами, и в вопросе никогда не указывались.
7

что есть функция обратного вызова, подобная той, которую вы описываете.

Здесь нормально делать изменения, используя некоторый серверный язык, такой как PHP.

В PHP вы можете, например, получить скрытое поле из вашей формы и внести некоторые изменения, если оно присутствует.

PHP:

  $someHiddenVar = $_POST["hidden_field"];
    if (!empty($someHiddenVar)) {
        // do something 
    }

Один из способов сделать это в Jquery - использовать Ajax. Вы можете прослушать submit, вернуть false, чтобы отменить его поведение по умолчанию и использовать взамен jQuery.post (). jQuery.post имеет успешный обратный вызов.

$.post("test.php", $("#testform").serialize(), function(data) {
  $('.result').html(data);
});

http://api.jquery.com/jQuery.post/

Похожие вопросы