多表格提交失敗

Question

有人能幫助我嗎。 我回答了類似的問題，但無法解決我的問題，所以我試圖盡可能詳細地說明問題。 對不起，如果重復，但我真的需要幫助。

我試圖通過mouseover事件向同一個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();
    });
    });
});

即使我只嘗試一種形式，這根本不起作用。 （mouseover事件本身會觸發。）

這三種形式具有相同的輸入名稱（我只顯示了一個），但具有不同的值。 他們單獨提交確定。

<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請求，而不是實際提交表單。 您可以同時發送所有三個請求，並使其正常工作，但這取決於您在提交后對服務器的響應所做的具體操作。

有關使用它來執行AJAX調用的更多信息，請查看jQuery文檔 。

示例代碼可能如下所示：

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請求，每個表單對應一個表單。 不保證他們會按照該順序完成（盡管根據您提供的信息，這似乎並不重要）。