Làm cách nào để thực hiện Gọi lại Jquery sau khi gửi biểu mẫu?

Tôi có một biểu mẫu đơn giản với remote = true.

Biểu mẫu này thực sự nằm trên Hộp thoại HTML, sẽ đóng lại ngay khi nhấp vào nút Gửi.

Bây giờ tôi cần thực hiện một số thay đổi trên trang HTML chính sau khi biểu mẫu được gửi thành công.

Tôi đã thử điều này bằng cách sử dụng jQuery. Nhưng điều này không đảm bảo rằng các nhiệm vụ được thực hiện sau một số hình thức phản hồi của việc gửi biểu mẫu.

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

// do the task here ..

});

Làm cách nào để đính kèm một lệnh gọi lại, để mã của tôi chỉ được thực thi sau khi biểu mẫu được gửi thành công? Có cách nào để thêm một số lệnh gọi lại .success hoặc .complete vào biểu mẫu không?

Tôi vừa làm điều này -

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

         // tasks to do 


   });

Và mọi thứ đã hoạt động hoàn hảo.

Xem tài liệu api này để biết thêm chi tiết cụ thể.

Tôi không thể làm cho giải pháp được ủng hộ số một hoạt động đáng tin cậy, nhưng tôi đã tìm thấy giải pháp này hoạt động hiệu quả. Không chắc liệu nó có bắt buộc hay không, nhưng tôi không có thuộc tính action hoặc method trên thẻ, điều này đảm bảo POST được xử lý bởi hàm $ .ajax và cung cấp cho bạn tùy chọn gọi lại.

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

Bạn sẽ phải thực hiện mọi việc theo cách thủ công với lệnh gọi AJAX tới máy chủ. Điều này cũng sẽ yêu cầu bạn ghi đè biểu mẫu.

Nhưng đừng lo lắng, đó là một miếng bánh. Dưới đây là tổng quan về cách bạn sẽ làm việc với biểu mẫu của mình:

• ghi đè hành động gửi mặc định (nhờ đối tượng sự kiện được chuyển vào, có một preventDefaultphương thức)
• lấy tất cả các giá trị cần thiết từ biểu mẫu
• kích hoạt một yêu cầu HTTP
• xử lý phản hồi cho yêu cầu

Trước tiên, bạn sẽ phải hủy hành động gửi biểu mẫu như sau:

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

Và sau đó, lấy giá trị của dữ liệu. Hãy giả sử bạn có một hộp văn bản.

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

Và sau đó đưa ra một yêu cầu. Hãy giả sử đó là một yêu cầu ĐĂNG.

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

Và điều này nên làm điều đó.

Lưu ý 2: Để phân tích cú pháp dữ liệu của biểu mẫu, bạn nên sử dụng plugin . Nó sẽ làm cho cuộc sống của bạn thực sự dễ dàng, cũng như cung cấp một ngữ nghĩa tốt đẹp bắt chước một hành động gửi biểu mẫu thực tế.

Lưu ý 2: Bạn không nhất thiết phải sử dụng bộ khử âm. Nó chỉ là một sở thích cá nhân. Bạn cũng có thể làm những việc sau và nó cũng sẽ hiệu quả.

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

Đối với MVC, đây là một cách tiếp cận thậm chí còn dễ dàng hơn. Bạn cần sử dụng biểu mẫu Ajax và đặt AjaxOptions

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

đây là mã gửi, đây là trong phần sẵn sàng tài liệu và liên kết sự kiện onclick của nút để gửi biểu mẫu

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

đây là lệnh gọi lại được tham chiếu trong AjaxOptions

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

trong phương thức điều khiển cho MVC, nó trông giống như thế này

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

Tôi không tin là có một hàm gọi lại như bạn mô tả.

Điều bình thường ở đây là thực hiện các thay đổi bằng cách sử dụng một số ngôn ngữ phía máy chủ, như PHP.

Trong PHP, ví dụ, bạn có thể tìm nạp một trường ẩn từ biểu mẫu của mình và thực hiện một số thay đổi nếu nó hiện diện.

PHP:

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

Một cách để thực hiện nó trong Jquery là sử dụng Ajax. Bạn có thể nghe gửi, trả về false để hủy hành vi mặc định của nó và sử dụng jQuery.post () để thay thế. jQuery.post có một cuộc gọi lại thành công.

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

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

Các trình xử lý "khi gửi" của biểu mẫu được gọi trước khi biểu mẫu được gửi. Tôi không biết liệu có trình xử lý nào được gọi sau khi biểu mẫu được gửi hay không. Theo nghĩa truyền thống không phải Javascript, việc gửi biểu mẫu sẽ tải lại trang.

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