양식 제출 후 재쿼리 콜백을 수행하는 방법은 무엇입니까?

양식 제출 후 재쿼리 콜백을 수행하는 방법은 무엇입니까?

remote=true를 사용하는 간단한 양식을 가지고 있습니다.

이 양식은 실제로 HTML 대화상자에 있습니다. HTML 대화상자는 [제출] 단추를 누르자마자 닫힙니다.

이제 양식이 성공적으로 제출된 후 메인 HTML 페이지에서 변경해야 합니다.

저는 jQuery를 사용해 보았습니다.그러나 양식 제출의 응답 형식 이후에 작업이 수행되는 것은 아닙니다.

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

// do the task here ..

});

양식이 성공적으로 제출된 후에만 코드가 실행되도록 콜백을 첨부하려면 어떻게 해야 합니까?양식에 .success 또는 .complete 콜백을 추가할 수 있는 방법이 있습니까?

방금 한 일인데,

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

         // tasks to do 


   });

그리고 모든 것이 완벽하게 작동했습니다.

자세한 내용은 이 API 설명서를 참조하십시오.

저는 최고의 지지를 받은 솔루션을 안정적으로 작동할 수는 없었지만, 이것이 효과가 있다는 것을 알게 되었습니다.필수인지 아닌지 확실하지 않지만 태그에 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>

서버에 대한 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 양식을 사용하고 Ajax 옵션을 설정해야 합니다.

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

여기 제출 코드가 있습니다. 이 코드는 문서 준비 섹션에 있으며 양식을 제출하기 위해 버튼의 클릭 이벤트를 연결합니다.

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

다음은 Ajax 옵션에서 참조한 콜백입니다.

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를 사용하는 것입니다.제출을 듣고 false를 반환하여 기본 동작을 취소하고 대신 jQuery.post 을 사용할 수 있습니다.jQuery.post 에는 성공 콜백이 있습니다.

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

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

양식을 제출하기 전에 양식의 "제출 중" 처리기가 호출됩니다.양식을 제출한 후에 호출할 핸들러가 있는지 모르겠습니다.전통적인 자바스크립트가 아닌 의미에서 양식 제출은 페이지를 다시 로드합니다.

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

언급URL : https://stackoverflow.com/questions/11534690/how-to-do-a-jquery-callback-after-form-submit