我试图通过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>
如何确保在提交第二个,然后第三个之前,一个表单提交后面的代码是否已完成?
任何帮助表示赞赏。 感谢
答案 0 :(得分:2)
听起来你最好使用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请求,每个表单对应一个表单。我们无法保证他们会按照该顺序完成(尽管根据您提供的信息,这似乎并不重要)。