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、および成功時に実行される anon 関数を受け取ります。

于 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

おそらく最も簡単な方法はonload、iframe にイベントを添付することです。フォームの送信が完了すると、イベントが発生します。

于 2012-09-18T18:43:49.593 に答える