ホームページ > ウェブフロントエンド > jsチュートリアル > 特定のフィールドを除外し、インジェクションの脆弱性を回避しながら、jQuery を使用して JSON データを HTML テーブルに変換するにはどうすればよいですか?

特定のフィールドを除外し、インジェクションの脆弱性を回避しながら、jQuery を使用して JSON データを HTML テーブルに変換するにはどうすればよいですか?

Barbara Streisand
リリース: 2024-10-30 22:53:03
オリジナル
287 人が閲覧しました

How can I convert JSON data to an HTML table using jQuery, while excluding specific fields and avoiding injection vulnerabilities?

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 を持つテーブル本体要素を見つけて、それに設定します。

特定のフィールドの除外

テーブルから特定のフィールドを除外するには、除外するフィールドのキーを格納するオブジェクトを定義できます。含む。 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
});
ログイン後にコピー

このコードは、HTML 文字列に依存する代わりに、insertRow() メソッドと insertCell() メソッドを直接使用し、より多くの安全な実装。

以上が特定のフィールドを除外し、インジェクションの脆弱性を回避しながら、jQuery を使用して JSON データを HTML テーブルに変換するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート