将完整的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); 
     } 
    }); 
}