Как сделать обратный вызов Jquery после отправки формы?


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

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

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

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

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

// do the task here ..

});

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

6 108

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);
});

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

для 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");
    }
}
$("#formid").ajaxForm({ success: function(){ //to do after submit } });