0

次の 2 つのことを行う[ドキュメントのダウンロード]ボタンがあります。

  1. ajax 呼び出しを行い、テーブルにデータを入力します。

  2. Post次のフォームを送信します。

    を。ドキュメントを作成するバックエンド スクリプトを実行します

    b. ブラウザーがドキュメントをダウンロードする方法で、ブラウザーにドキュメントを返します。

一つの問題。送信は ajax ではありません。postつまり、ブラウザーは、リンクをクリックしたり、ページを更新したり、ウィンドウを閉じたりするのと同じように処理します。たとえば、応答エラーを取得することなく ajax 要求をキャンセルします。

ボタンでの使用.preventDefault()は機能しません。ajax 呼び出し ( 1 ) は正常に完了しますが、フォームは送信されないため、( 2 ) フォームは送信されません。

    <form action="/backendScript" method="post">
      <input type="submit" value="Download Document">
    </form>

    $(".downloadBtn").on("click", function (e) {
        generateTable();
        e.preventDefault(); // without this, the ajax in generateTable(); is cancelled, but with it, the form isn't submitted.
    });

( 2 ) を ajaxpostで実行しても機能しません。完了することはできますが ( 2.a )、返されたドキュメントはブラウザではなく Javascript に直接送られ、Javascript はダウンロード イベントを発生させることができないため、( 2.b ) このアプローチでは失敗します。

   $.post("/backendScript", formData, function (generatedDoc) {
        console.log(generatedDoc); //yay, here's our doc! but how do we download it??
    });

そのため、フォームを送信する必要があるようです。 postしかし、進行中の ajax リクエストがキャンセルされないようにするにはどうすればよいでしょうか?

4

1 に答える 1

2

の ajax 呼び出しからの成功/エラー/任意の応答イベントでgenerateTable、フォームを送信します。document.forms["myform"].submit();または$('#myform').submit();（バニラjsまたはjQueryのどちらを使用するかによって異なります）。

于 2012-10-10T22:02:30.270 に答える