Form gönderildikten sonra Jquery Geri Araması nasıl yapılır?

Remote = true ile basit bir formum var.

Bu form aslında, Gönder düğmesi tıklanır tıklanmaz kapanan bir HTML İletişim Kutusundadır.

Şimdi, form başarıyla gönderildikten sonra ana HTML sayfasında bazı değişiklikler yapmam gerekiyor.

Bunu jQuery kullanarak denedim. Ancak bu, görevlerin form gönderiminin bir şekilde yanıtlanmasından sonra gerçekleştirilmesini sağlamaz.

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

// do the task here ..

});

Kodumun yalnızca form başarıyla gönderildikten sonra yürütülmesi için bir geri aramayı nasıl eklerim? Forma .success veya .complete geri araması eklemenin herhangi bir yolu var mı?

Bunu az önce yaptım -

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

         // tasks to do 


   });

Ve işler mükemmel çalıştı.

Bkz bu API belgelerine daha spesifik ayrıntılar için.

Güvenilir bir şekilde çalışmak için bir numaralı yükseltilmiş çözümü alamadım, ancak bu işe yaradı. Gerekli olup olmadığından emin değilim, ancak etikette POST'un $ .ajax işlevi tarafından işlenmesini sağlayan ve size geri arama seçeneği sunan bir eylem veya yöntem özniteliğine sahip değilim.

<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>

Sunucuya bir AJAX çağrısı ile işleri manuel olarak yapmanız gerekecek. Bu, formu da geçersiz kılmanızı gerektirecektir.

Ama endişelenme, bu çocuk oyuncağı. Formunuzla nasıl çalışacağınızla ilgili bir genel bakış:

• varsayılan gönderme eylemini geçersiz kılın (bir preventDefaultyöntemi olan olay nesnesinde geçirilen sayesinde )
• formdan gerekli tüm değerleri alın
• HTTP isteğini ateşlemek
• talebe verilen yanıtı işlemek

Öncelikle, aşağıdaki gibi form gönderme işlemini iptal etmeniz gerekir:

$("#myform").submit(function(event) {
    // Cancels the form's submit action.
    event.preventDefault();
});

Ve sonra, verilerin değerini kavrayın. Bir metin kutunuz olduğunu varsayalım.

$("#myform").submit(function(event) {
    event.preventDefault();
    var val = $(this).find('input[type="text"]').val();
});

Ve sonra bir isteği ateşleyin. Bunun bir POST isteği olduğunu varsayalım.

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

Ve bunu yapmalı.

Not 2: Form verilerini ayrıştırmak için bir eklenti kullanmanız tercih edilir . Hayatınızı gerçekten kolaylaştıracak ve gerçek bir form gönderme eylemini taklit eden güzel bir anlam bilgisi sağlayacaktır.

Not 2: Erteleme kullanmak zorunda değilsiniz. Bu sadece kişisel bir tercih. Aşağıdakileri eşit şekilde yapabilirsiniz ve bu da işe yaramalıdır.

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

MVC için burası daha da kolay bir yaklaşımdı. Ajax formunu kullanmanız ve AjaxOptions'ı ayarlamanız gerekir.

@using (Ajax.BeginForm("UploadTrainingMedia", "CreateTest", new AjaxOptions() { HttpMethod = "POST", OnComplete = "displayUploadMediaMsg" }, new { enctype = "multipart/form-data", id = "frmUploadTrainingMedia" }))
{ 
  ... html for form
}

İşte gönderim kodu, bu belge hazır bölümündedir ve formu göndermek için düğmenin onclick olayını bağlar

$("#btnSubmitFileUpload").click(function(e){
        e.preventDefault();
        $("#frmUploadTrainingMedia").submit();
});

AjaxOptions'da referans verilen geri arama burada

function displayUploadMediaMsg(d){
    var rslt = $.parseJSON(d.responseText);
    if (rslt.statusCode == 200){
        $().toastmessage("showSuccessToast", rslt.status);
    }
    else{
        $().toastmessage("showErrorToast", rslt.status);
    }
}

MVC için denetleyici yönteminde şuna benzer

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

Tanımladığınız gibi bir geri arama işlevi olduğuna inanmıyorum.

Burada normal olan, değişiklikleri PHP gibi bazı sunucu tarafı dillerini kullanarak yapmaktır.

PHP'de, örneğin formunuzdan gizli bir alanı getirebilir ve varsa bazı değişiklikler yapabilirsiniz.

PHP:

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

Jquery'de bunu yapmanın bir yolu Ajax kullanmaktır. Göndermeyi dinleyebilir, varsayılan davranışını iptal etmek için yanlış döndürebilir ve bunun yerine jQuery.post () kullanabilirsiniz. jQuery.post'un bir başarı geri araması vardır.

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

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

Formun "gönderimde" işleyicileri, form gönderilmeden önce çağrılır. Form gönderildikten sonra çağrılacak bir işleyici var mı bilmiyorum. Geleneksel Javascript olmayan anlamda, form gönderimi sayfayı yeniden yükleyecektir.

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