將json數據包含在非AJAX帖子中

我有一個向用戶顯示數據的JavaScript數據透視表。用戶可以選擇列/行等。我已經添加了導出到Excel按鈕，它執行與數據透視表（json數據）的當前數據/視圖的ajax帖子。它將數據發佈到我的服務器，將其轉換爲Excel文件。將json數據包含在非AJAX帖子中

創建文件一切正常，但我的問題是獲取文件給用戶。從我讀過的內容來看，我無法在ajax文章後向用戶發送文件。

我很高興使用一個普通的html文章（實際上它是我想要的，因爲我可以將用戶重定向到文件），但我不知道如何將透視表數據作爲因爲它不是一種形式。

我知道我可以在本地保存文件併發回一個url，但這使事情變得複雜，我想避免它。

有沒有可能做到這一點，而無需在本地保存文件併發送文件所在的URL？

來源

2017-01-19 Johan

「創建文件一切正常，但我的問題是獲取文件給用戶」通過「獲取文件給用戶」我假定你的意思是讓文件到瀏覽器？如果是這樣，在將文件保存到您的服務器後，您應該有一個到該文件的url鏈接嗎？ – Zuks

'我不能發送文件給用戶ajax後'是的，你可以http://stackoverflow.com/a/20830337 – Viney

不，我沒有一個url鏈接。我在內存中創建文件 – Johan

瀏覽器還不支持JSON序列化表單，所以AFAIK實際上不可能使用純粹的表單發送JSON到後端。

我有兩個解決方案，不需要保存在服務器上的文件：

1）簡單的解決辦法是產生JavaScript的無形的形式，創建名json的隱藏的輸入，並使用JSON內容填充它送到服務器。在服務器端，您將讀取表單數據並解析存儲在數據中的JSON。然後，您只需生成該文件併發送該文件作爲響應。瀏覽器應該觸發下載對話框。

var form = document.createElement('form'); 
form.method = 'post'; 
form.action = 'url'; 
var input = document.createElement('input'); 
input.type = 'hidden'; 
textarea.name = 'json'; 
textarea.value = JSON.stringify(your_json); 
form.appendChild(input); 
document.body.appendChild(form); 
form.submit(); 
form.parentNode.removeChild(form);

2）第二個選項使用ajax發送數據到服務器。不過，瀏覽器需要支持多種API。

您照常執行JSON請求，並且服務器應響應標題Content-Type: here-the-MIME-type-of-your-file和響應正文中的文件內容。

在客戶端的代碼應該是這樣的：

var json = JSON.stringify({here: ['your', 'json', 'to', 'send', 'to', 'server']}); 
var xhr = new XMLHttpRequest(); 
xhr.open('POST', '/your/api/url', true); 
xhr.setRequestHeader('Content-type', 'application/json'); 
xhr.responseType = 'arraybuffer'; 
xhr.addEventListener('load', function() { 
    var blob = new Blob([this.response], { // reading response, not responseText 
    type: this.getResponseHeader('Content-Type') 
    }); 

    var url = URL.createObjectURL(blob); 
    var a = document.createElement('a'); 
    a.href = url; 
    a.download = 'file_name.txt'; // set proper extension 
    document.body.appendChild(a); // it needs to be added to the document in order to work 
    a.click(); 
    a.parentNode.removeChild(a); 
}); 

xhr.send(json);

而且，所創建的URL對象應該在某個時候被撤銷，否則會一直存在，直到頁面重新加載。但我認爲在用戶下載文件之前不能撤銷它們。因此，上述代碼仍然是一項任務。

來源

2017-01-19 14:36:51 Rafael

非常感謝，我喜歡選項1 – Johan

我認爲在選項2文本區域應該輸入。除此之外，它完美的工作！再次感謝 – Johan

將json數據包含在非AJAX帖子中

回答

相關問題