发布到 iframe 时同步表单提交

Question

我有一个将数据发布到隐藏的<iframe> 的表单，以防止页面更改。但是我希望保存按钮一个接一个地执行两个连续的submit()s。

<form name="updatedocform" id="updatedocform" method="post" action="http://foo.bar" enctype="multipart/form-data" target="hiddenframe">
    ...
    <input type="submit" onclick="save(); return false;" value="Save" />
</form>
<iframe name="hiddenframe" id="hiddenframe"></iframe>

JavaScript：

function save() {
    document.updatedocform.submit();
    // change some form values here
    // alert("paused"); // if this alert is here, everything works fine
    document.updatedocform.submit();
}

然而，第二个submit() 在第一个完成加载之前被调用。有没有办法让第二次提交等待第一次完成？

我可以使用setTimeout()，但我想要一个不依赖于网络速度的更简洁的解决方案。

Answer 1

我想最基本的解决方案（循环 setTimeout 除外）可能是使用类似的东西而不是 save() 函数

var firstSaving = false;
function save() {
    document.updatedocform.submit();
    firstSaving = true;
}

function secondSave() {
    if(firstSaving)
    {
        firstSaving = false;
        document.updatedocform.submit();
    }
}

然后在 iframe 上加载类似

top.secondSave();

Answer 2

你可以使用 jquery $.ajax()

你必须拦截第一次提交的点击事件，通过ajax发送表单数据，然后你可以绑定到ajax插件完成回调函数并进行第二次iframe提交。

$("submit").click(function () {
      $(this).closest("form").ajax({
          url: "test.html",
          data: $("form").serialize(),
          success: function(){
             //fire second submit event
          }
     });
 });

希望这会有所帮助。