如何使用jQuery Forms Plugin更新beforeSubmit函数中的Options对象

Question

我正在重构我使用$.ajax来使用jQuery Forms Plugin提交表单。 API指出可以将传递给$.ajax的任何选项传递给$.ajaxSubmit。我希望修改beforeSubmit中的选项对象，并添加一个data属性。在processSubmit中提醒options.beforeSubmit的值表明这是由处理程序初始化的选项对象，并且设置了数据，但由于选项对象已经被初始化而没有data属性，因此它不包含在发送给服务器。是否可以修改beforeSubmit中的选项对象，或以其他方式？

当文档准备好我绑定一个处理程序submit()：

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

的processSubmit(arr, $form, options)功能包起来的数据将被发送到服务器的JSON：

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：

<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

而不是beforeSubmit你应使用the beforeSerialize option，这样您的数据在序列化时就会被包含在内。对于传递给$.ajax()的选项，您没有设置.data，您在$.ajaxSubmit()选项上设置了.data选项，该选项是序列化时要包含的额外数据插件的属性。当beforeSubmit发生，系列化具有已经已经完成，你需要在这之前介入，像这样：

$("#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回调参数不同的重要区别，beforeSerialize回调没有arr参数。