Question

我正在尝试使用表单将一些文件提交到我的数据库。表单具有隐藏iframe的目标。当它完成加载时，我想要显示一条消息。

 $("form#formPost").submit();
 customFunction();

这个例子在启动 customFunction（）之前似乎没有完成提交，这对我的设计非常糟糕。

有没有办法在完成发送数据时执行某些操作？我正在环顾stackoverflow，并且没有很多帖子直接关于此。我觉得我必须进入目标iframe，并在准备就绪时在那里执行代码，等等。有没有办法让它按照我的意愿去做？

我尝试过的选项：

 $("form#formPost").submit(function(){ customFunction(); });

Answer 1

Coworker创建了一个能够做到这一点的功能。

function SubmitWithCallback(form, frame, successFunction) {
   var callback = function () {
       if(successFunction)
           successFunction();
       frame.unbind('load', callback);
   };

   frame.bind('load', callback);
   form.submit();
}

此功能采用您提交的表单，表单目标iframe，以及将在成功时执行的匿名函数。

Answer 2

如果您以传统方式提交表单，那么您实际上是在说“我已经完成了这个页面。这里有一堆表单数据供您，Web服务器使用，以呈现我的下一页”。 Web服务器获取表单数据并返回到下一页的浏览器。

如果您不希望重新加载页面，可以使用Ajax提交表单。使用jQuery非常简单：

http://api.jquery.com/jQuery.ajax/

使用Ajax，您可以在提交完成，成功完成以及错误时有明确定义的事件。

我不建议定位隐藏的iframe。 Ajax更适合这种类型的处理。

<强>更新

以下是如何构建Ajax的示例

<form id='myFormId'>
<!-- Form fields, hidden, file or otherwise -->
</form>

var formVars = $("#myFormId").serialize();
$.ajax({ url: ajaxUrl, cache: false, type: 'POST', data: formVars, 
    success: function (data) { handleSuccessCase }, 
    error: handleAjaxError });

更新2

根据https://stackoverflow.com/a/5513570/141172

中的评论

您可以尝试：

var formVars = $('#myFormId').serialize() + '&foo=' + $('#id_of_your_file_input').val()

或者，您可以尝试在评论中建议的插件，这与上面链接的答案中的解决方案相同。

Answer 3

最简单的事情可能是在iframe上附加onload个事件。表单完成提交后，将触发该事件。

表单完成提交后执行javascript

3 个答案: