6

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

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

这个例子似乎在触发customFunction()之前没有完成提交，这对我的设计非常不利。

有没有办法做一些在完成发送数据时会触发的事情？我在stackoverflow上环顾四周，并没有很多关于这个的帖子。我觉得我必须进入目标 iframe 并在它准备好时执行那里的代码等。有没有办法让它按照我的意愿去做？

我尝试过的选项：

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

3 回答 3

11

同事创建了一个功能来做到这一点。

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

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

此函数采用您提交的表单、表单目标 iframe 和一个将在成功时执行的匿名函数。

于 2012-09-19T17:17:27.957 回答
4

如果您以传统方式提交表单，您实际上是在说“我已完成此页面。这里有一堆表单数据供您，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()

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

于 2012-09-18T18:42:58.427 回答
1

也许最简单的做法是在 iframe 上附加一个onload事件。当表单完成提交时，该事件将触发。

于 2012-09-18T18:43:49.593 回答