Question

我正在重构使用$.ajax来使用jQuery Forms Plugin提交表单。 API表示可以将传递给$.ajax的任何选项传递给$.ajaxSubmit。我希望修改beforeSubmit中的选项对象，添加data属性。在options.beforeSubmit中警告processSubmit的值表明这是由处理程序初始化的选项对象并且数据已设置，但是因为选项对象已经初始化而没有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，因此您的数据在序列化时会被包含在内。您没有在传递给.data的选项上设置$.ajax()，而是在.data选项上设置$.ajaxSubmit()，这是附加数据插件的属性包括何时序列化。当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参数。

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

1 个答案: