通過郵件向服務器發送DOM元素的內容

我想向服務器發送一個表並讓它返回一個csv文件。我認爲做到這一點的唯一方法是將表格內容放入一個隱藏的表單元素並將其提交給服務器。通過郵件向服務器發送DOM元素的內容

<form id='csvForm' method="POST" action="makeCSV.php"> 
    <input type='hidden' name='content' value='' /> 
</form> 

<input type='button' id='generateCSV' value='CSV' /> 

<table id='myTable'> 
    <tr> 
    <td>this is a test</td> 
    </tr> 
</table> 

<script> 
$('#generateCSV').on('click', function(){ 
    // ????? 
    $('#csvForm').submit(); 
}); 
</script>

我不知道我需要在問號行處將html放入隱藏窗體元素。我假設我需要以某種方式逃避HTML DOM。

來源

2015-03-19 Mike

我個人認爲這是更好地得到你需要的值，並將其發送到服務器，而不是整個表。爲什麼你需要這樣的想法？ – CorwinCZ 2015-03-19 13:27:55

我會避免將HTML發送到服務器......這是一種代碼異味......理想情況下，您希望類似數據的JSON表示，然後可以從JSON構建HTML表格和CSV。 – BenjaminPaul 2015-03-19 14:29:41

有沒有辦法解決最終解析出的HTML，但你確實有一些決定是否能力在服務器端或客戶端執行此操作。

如果要延遲解析直到服務器端，請將document.getElementById('myTable').outerHTML放入隱藏字段。這會將一組文本傳遞給服務器，文本將成爲表格DOM的HTML表示形式。我說「表格的DOM的HTML表示」，因爲它可能不是，正如與頁面上的HTML代碼一樣，但它至少應該在語義上等同於該代碼（加上您可能在DOM通過JavaScript）。在服務器端，您可以通過某種解析器運行此文本，提取數據並將其放入CSV中以將其返回。

您也可以在客戶端解析表，也許使用類似於Visitor模式的東西來遍歷表的DOM並構建出不同的數據結構。。這是不平凡的東西，但它通過以更緊湊和易於解析的形式傳輸數據，可以爲您節省一些帶寬和服務器負載。你甚至可以將它作爲CSV傳遞，以便服務器不需要在所有格式之間轉換數據;取決於你需要怎樣處理數據，這可能會讓你完全切斷AJAX調用。

來源

2015-03-19 13:23:11

爲什麼沒有辦法避免解析HTML？取決於如何解決這個問題...有沒有辦法繞過這個IF如果HTML是發送到服務器......但說實話，我會說它不應該。例如，通過JSON發送更加可取...從該JSON和CSV生成表格。 – BenjaminPaul 2015-03-19 14:28:29

採取點;我的術語有點鬆散。訪客將會是將它解析出DOM樹的一個例子。或者你可以將它直接渲染成一些基於文本的格式，比如我的基於外部HTML的解決方案，然後用分析器或正則表達式（如果你不介意追求Zalgo）或其他方法從中剔除數據。這裏使用JSON的問題是，爲了做到這一點，你首先必須從數據樹中獲取數據，如果你能做到這一點，那麼你可以直接把它放入CSV中（這是最終目標無論如何）。 – 2015-03-19 15:33:08

你可以這樣寫，您需要首先分析表中的數據資料表

var tmp = []; 
var TABLEDATA = '' 


// Parse table data 
$('#tableid').find('tr').each(function() { 
    TABLEDATA += "\n"; 
    tmp = []; 
    $($(this)).find('td').each(function() { 
     var $th = $(this); 
     var text = $th.text(); 

     tmp.push(text); 
    }); 
    TABLEDATA += tmp.join(","); 
}); 


$('#generateCSV').on('click', function(){ 
    var form = $('<form></form>'); 
    $(form).hide().attr('method', 'POST').attr('action', URL); 

    var input = $('<input type="hidden" />').attr('name', 
       'tabledata').val(TABLEDATA); 

    $(form).append(input); 

    $(form).appendTo('body').submit(); 
});

來源

2015-03-19 13:17:07

我喜歡這種方法，但你遺漏了我最需要的部分，那就是將TABLEDATA放在那裏。我只想發送整個html到服務器，我將解析html到服務器端的csv。它不會像$（'＃myTable'）。html（）對嗎？因爲我認爲它需要以某種方式逃脫。 – Mike 2015-03-19 13:19:49

@Mike是的，你可以發佈$（'＃myTable'）。html（），它應該這樣做，但使用ajax發送html會更好。 – jcubic 2015-03-19 13:36:02

客戶端解決方案和發送格式的CSV到服務器側：

的下面將循環通過所有的表（#myTable）的行和列，並創建一個CSV輸出。爲了將它發送到服務器端，我已將它添加到隱藏字段並提交表單（取消註釋行// $（「＃csvForm」）。submit（））。

下面是示例代碼：

<html> 
<body> 

    <form id="csvForm" method="POST" action="makeCSV.php"> 
     <input name="csv_content" type="hidden" value="" /> 
     <input type="button" id="generateCSV" value="CSV" /> 
    </form> 

    <table id="myTable"> 
     <thead> 
      <tr> 
       <th>Column1</th> 
       <th>Column2</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Test1</td> 
       <td>Test2</td> 
      </tr> 
      <tr> 
       <td>Test3</td> 
       <td>Test4</td> 
      </tr> 
     </tbody> 
    </table> 

    <!-- Remove after testing --> 
    <p id="generated_csv" style="border:1px solid black;white-space:pre-wrap;"></p> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script> 
    $("#generateCSV").on("click", function(){ 

     var header_rows = $("#myTable thead tr"); //Get header content 
     var body_rows = $("#myTable tbody tr");  //Get body content 

     var csv_output = ""; 

     //Loop through header rows 
     //COMMENT FOR LOOP TO REMOVE HEADERS FROM CSV 
     for (var r = 0; r < header_rows.length; r++) { 
      //Loop through header columns 
      for (var c = 0; c < header_rows[0].children.length; c++) { 

       //Add header column value 
       csv_output += header_rows[r].children[c].textContent+","; 

       //Remove comma from last header column value of the row 
       if (c == header_rows[0].children.length - 1) 
        csv_output = csv_output.substring(0, csv_output.length - 1); 

      }; 
      //Add return carriage and new line characters at the end of the row 
      csv_output += "\r\n"; 
     }; 

     //Loop through rows 
     for (var r = 0; r < body_rows.length; r++) { 
      //Loop through columns 
      for (var c = 0; c < body_rows[0].children.length; c++) { 

       //Add column value 
       csv_output += body_rows[r].children[c].textContent+","; 

       //Remove comma from last column value of the row 
       if (c == body_rows[0].children.length - 1) 
        csv_output = csv_output.substring(0, csv_output.length - 1); 

      }; 
      //Add return carriage and new line characters at the end of the row 
      csv_output += "\r\n"; 
     }; 

     //Add CSV output to hidden form control 
     $("#csv_output").val(csv_output); 

     //Add CSV ouptut to page for testing, REMOVE after testing 
     $("#generated_csv").text(csv_output); 

     //Submit form to send to server side 
     //Uncomment to send to server side 
     //$("#csvForm").submit(); 
    }); 
    </script> 

</body>

來源

2015-03-19 14:12:55

回答

相關問題