jquery之如何使用 jQuery 表单插件更新 beforeSubmit 函数中的选项对象

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

文档准备好后，我将处理程序绑定(bind)到 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> 

请您参考如下方法:

而不是 beforeSubmit你应该使用the beforeSerialize option ，因此您的数据在序列化时会被包含在内。您没有设置 .data关于传递给 $.ajax() 的选项，您正在设置 .data关于$.ajaxSubmit() options，这是序列化时要包含的额外数据插件的属性。当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 不同的重要区别。 ，没有arr beforeSerialize 的参数回调。