jQuery Forms Plugin을 사용하여 beforeSubmit 함수에서 Options 객체를 업데이트하는 방법

Question

$.ajax을 jQuery Forms Plugin을 사용하여 양식을 리팩터링하려고합니다. API은 $.ajax에 전달 된 옵션 중 하나를 $.ajaxSubmit에 전달할 수 있다고 명시합니다. beforeSubmit에있는 옵션 개체를 수정하고 data 속성을 추가하고 싶습니다. options.beforeSubmit의 값을 processSubmit에 알리면 이것이 이것이 처리기에 의해 초기화되고 데이터가 설정되었지만 옵션 개체가 이미 data 속성으로 초기화되지 않았으므로 전송 된 게시물에는 포함되지 않았 음을 알 수 있습니다. 섬기는 사람. beforeSubmit 또는 다른 방법으로 옵션 개체를 수정할 수 있습니까?

function processSubmit(arr, $form, options) { 
    var followers =[]; 
    $($("#follower-multi-select").children().filter("li")).each(function() { 
     if ($(this).hasClass("selected")) { 
     var fwr = $(this).attr("id"); 
     followers.push(fwr); 
     } 
    }); 

    var postData = { followers : followers }; 
    alert('beforeSubmit is: ' + options.beforeSubmit); 

    options.data = 'json='+$.toJSON(postData); 
    alert('data set: ' + options.data); 
} 

양식 HTML : JSON으로 서버에 전송 될

$("#myform").submit(function() { 
    var options = { dataType: 'json', 
      beforeSubmit: processSubmit, 
      success: endSubmit }; 
    $(this).ajaxSubmit(options); 
    return false; 
}); 

processSubmit(arr, $form, options) 기능까지 패키지 데이터 :

문서가 나는 submit()에 처리기를 바인딩 할 준비가

<form id="myform" action="/myaction" method="post"> 
    <fieldset> 
     <legend>Choose your competitors</legend> 
     <ul id="follower-multi-select" class="follower-multi-select"> 
      {% for f in follower_thumbs %} 
      <li id="{{ f.hashedkey }}"><img src='{{ f.thumb }}' alt="{{ f.name }}" /><span class="name-multi-select">{{ f.name }}</span></li> 
      {% endfor %} 
     </ul> 
    </fieldset> 
    <input id="send" type="submit" class="large" value="send" /> 
</form> 

Answer 1

대신에 beforeSubmitthe beforeSerialize option을 사용해야하므로 직렬화 될 때 데이터가 포함됩니다. $.ajax()에 전달 된 옵션에 .data을 설정하지 않은 경우 $.ajaxSubmit() 옵션에 .data 옵션을 설정합니다.이 옵션은 직렬화 할 때 포함 할 추가 데이터의 플러그인에 대한 속성입니다.

$("#myform").submit(function() { 
    var options = { dataType: 'json', 
      beforeSerialize: processSubmit, 
      success: endSubmit }; 
    $(this).ajaxSubmit(options); 
    return false; 
}); 

function processSubmit($form, options) { 
    var followers = $("#follower-multi-select > li.selected").map(function() { 
     return this.id; 
    }).get(); 

    var postData = { followers : followers }; 
    alert('beforeSubmit is: ' + options.beforeSubmit); 

    options.data = 'json='+$.toJSON(postData); 
    alert('data set: ' + options.data); 
} 

나는 또한 훨씬 간단 배열의 점점 있도록 .map() 여기에 > child-selector를 사용하지만 : beforeSubmit이 발생하면, 직렬화가 이미이 완료, 당신은 다음과 같이 그 전에 개입 할 필요가 원래의 방법이 작동합니다 ... 매개 변수가 beforeSubmit의 콜백에서 다른 중요한 차이점에 유의하십시오. beforeSerialize 콜백에 대해서는 arr 매개 변수가 없습니다.