특정 필드를 제외하고 주입 취약점을 방지하면서 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인 경우에만 테이블 행에 포함합니다.

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