jquery - 使用 jQuery 提交一个又一个表单？

Question

如何设置自动队列系统来依次运行多个提交？我不希望他们立即提交，否则可能会破坏我的后端 PHP 脚本。

这是一个简单的示例，假设每个表单都可以独立提交，并且主提交将串行运行所有表单。

<input type="submit" id="submit_all" value="Submit All" />

<form id="form-1" method="post" action="function.php">
<input type="text" name="foo" value="Foo" />
<input type="submit" value="Submit" />
</form>

<form id="form-2" method="post" action="function.php">
<input type="text" name="foo" value="Foo" />
<input type="submit" value="Submit" />
</form>

<form id="form-3" method="post" action="function.php">
<input type="text" name="foo" value="Foo" />
<input type="submit" value="Submit" />
</form>

更新:

我正在开发的脚本是用于备份多个网站的 FTP 文件和 MySQL 转储的工具 - 本质上是一个为 Web 管理员提供的自动备份工具。

每个表单包含连接到每个站点的 FTP 和 MySQL 的值，PHP 函数在本地复制和存储文件并创建 MySQL 转储。

复制每个站点的文件可能需要 20 多分钟，因此我们的想法是创建一个“主按钮”来自动执行每个备份，一个接一个。

Answer 1

您可以尝试这个 jQuery 示例。我是即时编码的，所以它没有经过测试 - 但你明白我想要做什么。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
var state = false;

$(document).ready(function() {
    $('#submit_all').click(function() {
        go();

        // get all forms on the page
        $forms = $('form');
        sent = 0;

        // post the form (non-async)
        $forms.each(function() {
            if(state) {
            $.ajax({
                type: "post",
                async: false,
                url: $(this).attr("action"), 
                data: $(this).serialize(), 
                success: function(data) { 
                    if(++sent == $forms.length) {
                        alert("All forms submitted!");
                    }
                }
            });
            } else { return false; }
        });
        stop();
    });

    $('#cancel').hide().click(stop);

    function go() {
        if(!state) {
            state = true;
            $('#submit_all').hide();
            $('#cancel').show();
            $('input[type=button], input[type=submit]').attr("disabled", "disabled");
    }}

    function stop() {
        if(state) {
            state = false;
            $('#submit_all').show();
            $('#cancel').hide();
            $('input[type=button], input[type=submit]').removeAttr("disabled");
    }}
});
</script>

<input type="button" id="submit_all" value="Submit All" />
<input type="button" id="cancel" value="Cancel" />

<form id="form-1" method="post" action="function.php">
<input type="text" name="foo" value="Foo" />
<input type="submit" value="Submit" />
</form>

<form id="form-2" method="post" action="function.php">
<input type="text" name="foo" value="Foo" />
<input type="submit" value="Submit" />
</form>

<form id="form-3" method="post" action="function.php">
<input type="text" name="foo" value="Foo" />
<input type="submit" value="Submit" />
</form>