> 웹 프론트엔드 > 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가 있는 테이블 본문 요소를 찾아 채웁니다. 동적으로 생성된 HTML을 사용합니다.

특정 필드 제외

테이블에서 특정 필드를 제외하려면 원하는 필드의 키를 저장하는 개체를 정의할 수 있습니다. 포함하다. getJSON() 콜백 함수 내에서 필드의 키가 이 개체에 있는지 확인하고 해당 값이 true인 경우에만 테이블 행에 포함합니다.

Injection-Free Alternative

잠재적인 주입 취약점을 방지하려면 주입이 필요 없는 다음 대안을 사용하는 것이 좋습니다.

$.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿