將完整的HTML頁面提交到x-www-form-urlencoded作爲查詢字符串編碼

Question

我想提交完整的HTML頁面到服務器，但我沒有提交表單。我不知道如果我正確地做到這一點，但使用JavaScript我想重建一個JSON對象{html：htmlPage，fileName：「foo」}到查詢字符串，然後提交到服務器這裏是我有的代碼。當我控制檯的HTML頁面看起來不正確。我使用jQuery的

var htmlPage = $("html").html(); 



     var str = { html: htmlPage, fileName: "foo" }; 
var params = jQuery.param(str); 



      var xhr = new XMLHttpRequest(); 

xhr.open('POST', '/', true); 

xhr.responseType = 'arraybuffer'; 
    xhr.onload = function() { 

    if (this.status === 200) { 
     var filename = ""; 
     var disposition = xhr.getResponseHeader('Content-Disposition'); 
     if (disposition && disposition.indexOf('attachment') !== -1) { 
      var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/; 
      var matches = filenameRegex.exec(disposition); 
      if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, ''); 

     } 
     var type = xhr.getResponseHeader('Content-Type'); 

     var blob = new Blob([this.response], { type: type }); 
     if (typeof window.navigator.msSaveBlob !== 'undefined') { 

      window.navigator.msSaveBlob(blob, filename); 
     } else { 
      var URL = window.URL || window.webkitURL; 
      var downloadUrl = URL.createObjectURL(blob); 

      if (filename) { 
       var a = document.createElement("a"); 
       if (typeof a.download === 'undefined') { 
        window.location = downloadUrl; 
       } else { 
        a.href = downloadUrl; 
        a.download = filename; 
        document.body.appendChild(a); 
        a.click(); 
       } 
      } else { 
       window.location = downloadUrl; 
      } 

      setTimeout(function() { URL.revokeObjectURL(downloadUrl); }, 100); // cleanup 
     } 
    } 
}; 
xhr.onerror = function(e) { 
console.log('in error', e); 
}; 
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;charset=UTF-8'); 
xhr.send(params); 

Answer 1

如果您有jQuery的

，那麼就使用AJAX http://api.jquery.com/jquery.ajax/。 這將Base64編碼您的HTML，然後在服務器端，你只需要base64解碼，然後使用它。嘿，整個html代碼不能算作表單數據，它是「text/html」。

（更新）試試吧，讓我知道。

// javascript 
function _upload(html_string) 
{ 
    return $.ajax({ 
     url: '/', 
     type: 'POST', 
     headers: {"Content-Type": "application/x-www-form-urlencoded"}, 
     data: {html: btoa(html_string), fileName: "foo" }, 
     success: function(data, textStatus, req){ 
      console.log(textStatus); 
     }, 
     error: function(req , textStatus, errorThrown){ 
      console.log("jqXHR["+textStatus+"]: "+errorThrown); 
      console.log('jqXHR.data', req.responseText); 
     } 
    }); 
}