jQuery / Ajax顯示“另存為”對話框，用於下載從Servlet發送的文件

Question

我已經在網站上閱讀了許多有關此問題的問題/答案，但不確定其中任何一個都可以解決我的問題。 以下是我的應用程序應如何工作：

1. 該頁面將顯示以前已下載的服務器上可用文件的列表。
2. 單擊該頁面時還將有一個按鈕，它將向Servlet發送一個請求，該Servlet將收集服務器上的數據並將其另存為zip文件到預定義目錄中。 然后，servlet讀取文件並將其作為具有以下響應內容類型和標頭信息的二進制流發送回客戶端：content-type = application / octet-stream header = content-Disposition，Attach; filename = ... header =內容類型，應用程序/ x-下載
3. 要求是異步的，因為servlet可能需要很長時間才能收集可能超過100 MB的大量數據。
4. 我必須在請求進行時禁用該按鈕，並且知道請求何時完成，以便可以將刷新發送到列表以顯示新文件。

我認為使用iframe，Window.location.href或html表單的解決方案不能滿足我的要求。 請讓我知道我的問題是否有解決方案。 任何幫助是極大的贊賞。

-譚

Answer 1

當您在問題標題中編寫它時，我建議您使用一些javascript，無論是JQuery還是原型都可以完成這項工作。

既然我對這最后一個了解更多，我將給出一些代碼

這是我為您了解的過程。

首先，您的服務器發送帶有表單的頁面。 然后用戶選擇一個文件並單擊send按鈕，該頁面不會重新加載並使用Ajax來完成工作，然后JQuery獲取數據並將其通過Ajax（ request(); ）發送到您的服務器，然后服務器將結果發送回，您可以將其顯示為displayFilesList();

your_form_id是您的表單ID

submitForm是表單提交時調用的函數的名稱

當您的服務器發送回結果時， displayFilesList將被調用此函數，該函數也希望您以json格式發送回結果

$('#your_form_id').submit(submitForm);

function submitForm()
{
    var data = $('#your_form_id').serializeArray();
    //Code to remove the send button here
    //Code to insert a loading.gif
    request("/your/url", data, displayFilesList);
    return false;
}

function    displayFilesList(jsonResult)
{
    var data = jQuery.parseJSON(jsonResult);
    //Code to display the files list here
    //
}

function    request(url, paramPost, successCallback, errorCallback)
{
    if ((typeof successCallback == 'undefined') || (successCallback == null))
        successCallback = dispSuccess;
    if ((typeof errorCallback == 'undefined') || (errorCallback == null))
        errorCallback = dispError;

    var AjaxUrl = url;

    $.ajax({    
            type: "POST",
            url: AjaxUrl,
            data: paramPost
           }
          ).done( function(msg)
                  {
                       successCallback(msg);
                  }
          ).fail( function(jqXHR, textStatus, errorThrown)
                  {
                       errorCallback(jqXHR, textStatus, errorThrown);
                  }
          );
}

function    dispError(jqXHR, textStatus, errorThrown)
{
    alert(jqXHR.responseText);
}
function    dispSuccess(html)
{
    alert(html);
}