javascript - 多个表单提交失败

Question

有人可以帮助我吗？我已经回复了类似的问题，但无法解决我的问题，因此我尝试在这里尽可能详细地回答。抱歉，如果重复了，但我确实需要帮助。

我试图通过鼠标悬停事件将三个表单提交到同一个 asp 页面。 asp 页面根据提交的表单及其包含的数据执行代码来保存图像。我尝试了几种方法来做到这一点。如下所示依次提交会导致创建部分或全部图像，但它是随机的，并且后续提交似乎会覆盖之前的调用。

function save_all_des(){
    document.getElementById("form_zoom1").submit();
    document.getElementById("form_zoom2").submit();
    document.getElementById("form_zoom3").submit();
}

我也尝试过像这样使用jquery:

$("#create_image").mouseover(function() {
    $("#form_zoom1").submit(function() {
    $("#form_zoom2").submit(function() {
    $("#form_zoom3").submit();
    });
    });
});

即使我只尝试一种形式，这也根本不起作用。 (鼠标悬停事件本身可以正常触发。)

这三种形式具有相同的输入名称(我只显示了一个)，但具有不同的值。他们单独提交没问题。

<form id="form_zoom1" name="form_zoom1"  action="abc.asp" target="MyFrame">
    <input type="hidden" name="tab" value="1">
</form>
<form id="form_zoom2" name="form_zoom2"  action="abc.asp" target="MyFrame2">
    <input type="hidden" name="tab" value="2">
</form>
<form id="form_zoom3" name="form_zoom3"  action="abc.asp" target="MyFrame3">
    <input type="hidden" name="tab" value="3">
</form>

<iframe id="MyFrame" name="MyFrame" style="display:none;"></iframe>
<iframe id="MyFrame2" name="MyFrame2" style="display:none;"></iframe>
<iframe id="MyFrame3" name="MyFrame3" style="display:none;"></iframe>

如何确保一个表单提交背后的代码在提交第二个、然后第三个表单之前完成？

任何帮助表示赞赏。 谢谢

Answer 1

听起来您最好使用 AJAX 向服务器发送 POST 请求，而不是实际提交表单。您可以同时发送所有三个请求，并使其正常工作，但这取决于提交后您对服务器响应的具体操作。

看看jQuery Documentation有关使用它执行 AJAX 调用的更多信息。

示例代码可能如下所示:

function submitForm(form) {
    $.ajax({
        url: 'abc.asp',
        method: 'post',
        data: {
            tab : $('input[name="tab"]',form).val()
        },
        success: function(data) {
            /* handle the response from the server here
            if you don't need to do anything to the structure of the page, you can probably just leave this blank
            may want to put in some console.log or alert statements for debugging purposes
            */
        }
    });
}

$('#create_image').mouseover(function() {
    submitForm($('#form_zoom1'));
    submitForm($('#form_zoom2'));
    submitForm($('#form_zoom3'));
});

请注意，大约在同一时间发送三个 AJAX POST 请求，每个表单一个。无法保证它们会按该顺序完成(尽管考虑到您提供的信息，这似乎并不重要)。