Як зробити зворотний виклик Jquery після надсилання форми?

У мене проста форма з віддаленою = true.

Ця форма фактично знаходиться в діалоговому вікні HTML, який закривається, як тільки натискається кнопка "Надіслати".

Тепер мені потрібно внести деякі зміни на головну сторінку HTML після успішного надсилання форми.

Я спробував це за допомогою jQuery. Але це не забезпечує виконання завдань після певної форми відповіді на подання форми.

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

// do the task here ..

});

Як приєднати зворотний дзвінок, щоб мій код виконувався лише після успішного надсилання форми? Чи є спосіб додати у форму якийсь .success або .comple callback?

Я щойно це зробив -

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

         // tasks to do 


   });

І справи працювали чудово.

Детальнішу інформацію див. У цій документації api .

Я не міг змусити рішення, яке підтримує номер один, щоб надійно працювати, але знайшов, що це працює. Не впевнений, потрібен він чи ні, але у мене немає тегу дії чи методу на тезі, що забезпечує функцію $ PO .ajax, яку обробляє POST і надає вам можливість зворотного виклику.

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

А потім знімати прохання. Давайте просто припустимо, що це 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.
    });
});

І це повинно робити це.

Примітка 2. Для розбору даних форми бажано використовувати плагін . Це зробить ваше життя справді легким, а також надасть приємну семантику, що імітує фактичну форму подання дії.

Примітка 2: Вам не потрібно використовувати відкладення. Це просто особисті переваги. Ви однаково можете зробити наступне, і це теж має працювати.

$.post("http://somewhere.com", { val: val }, function () {
    // Start partying here.
}, function () {
    // Handle the bad news here.
});

Для 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");
    }
}

Я не вірю, що існує функція зворотного виклику, як та, яку ви описуєте.

Тут нормально - це робити зміни, використовуючи мову на стороні сервера, наприклад PHP.

Наприклад, у PHP ви можете отримати приховане поле з вашої форми та внести деякі зміни, якщо вони є.

PHP:

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

Один із способів зробити це в Jquery - це використовувати Ajax. Ви можете слухати подання, повертати помилкове, щоб скасувати поведінку за замовчуванням і використовувати натомість jQuery.post (). jQuery.post має успішний зворотний дзвінок.

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

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

Обробники "при подачі" форми викликаються перед надсиланням форми. Я не знаю, чи є обробник, який потрібно викликати після подання форми. У традиційному сенсі, що не стосується JavaScript, подання форми перезавантажить сторінку.

$("#formid").ajaxForm({ success: function(){ //to do after submit } });