如何使用 jQuery 將 JSON 資料轉換為 HTML 表，同時排除特定欄位並避免注入漏洞？

使用jQuery 輕鬆將JSON 轉換為HTML 表格

將JSON 物件陣列轉換為HTML 表格可能是一項艱鉅的任務，尤其是當需要排除某些欄位。然而，jQuery 為這個挑戰提供了一個優雅而簡單的解決方案。

利用 jQuery 的 getJSON() 方法

getJSON() 方法從指定的 URL 非同步取得 JSON 資料並在成功檢索後執行回呼函數。在回呼函數中，將迭代數組中的每個 JSON 對象，並將每個字段轉換為 HTML 表格單元格。

建立表格結構

以下內容程式碼片段示範如何使用getJSON() 產生HTML 表格：

$.getJSON(url , function(data) {
    var tbl_body = "";
    var odd_even = false;
    $.each(data, function() {
        var tbl_row = "";
        $.each(this, function(k , v) {
            tbl_row += "<td>"+v+"</td>";
        });
        tbl_body += "<tr class=\""+( odd_even ? "odd" : "even")+"\">"+tbl_row+"</tr>";
        odd_even = !odd_even;               
    });
    $("#target_table_id tbody").html(tbl_body);
});

在此程式碼中， $("#target_table_id tbody") 選擇器定位具有指定ID 的表格主體元素並填入它使用動態產生的HTML。

排除特定字段

要從表中排除某些字段，您可以定義一個物件來儲存您想要的字段的鍵包括。在 getJSON() 回呼函數中，檢查該物件中是否存在該欄位的鍵，如果其值為 true，則僅將其包含在表格行中。

免注入替代方案

為了防止潛在的注入漏洞，請考慮使用以下免注入替代方案：

$.getJSON(url , function(data) {
    var tbl_body = document.createElement("tbody");
    var odd_even = false;
    $.each(data, function() {
        var tbl_row = tbl_body.insertRow();
        tbl_row.className = odd_even ? "odd" : "even";
        $.each(this, function(k , v) {
            var cell = tbl_row.insertCell();
            cell.appendChild(document.createTextNode(v.toString()));
        });        
        odd_even = !odd_even;               
    });
    $("#target_table_id").append(tbl_body);   //DOM table doesn't have .appendChild
});

此程式碼直接使用insertRow() 和insertCell() 方法，而不是依賴HTML 字串，從而確保更安全安全實作。

以上是如何使用 jQuery 將 JSON 資料轉換為 HTML 表，同時排除特定欄位並避免注入漏洞？的詳細內容。更多資訊請關注PHP中文網其他相關文章！