JavaScript가 여러 데이터를 요청하고 처리할 때 이를 구현하는 방법에 대해 종종 고민합니다. 다른 데이터 항목에 영향을 주지 않고 동적으로 편집하고 삭제하는 방법을 소개합니다. 예를 들어 XmlRequest를 통해 다음과 같은 방법을 소개합니다.
다음과 같이 코드 코드를 복사합니다.
<span style="font-size:14px;">{ "테이블":
[
{ "ID": 3, "유형": "X",
"내용": "중국 공산당 제18차 전국대표대회 보고서는 우리나라 인민민주주의의 중요한 형태가 무엇인지 지적했습니다.",
"Akey": "풀뿌리 민주주의 정치 시스템", "Bkey": "인민 의회 시스템",
"Ckey": "다자간 협력 시스템", "Dkey": null, "NUM": 3 },
{ "Id": 2, "Type": "X", "Content": "티베트 영양은 국가 1급 보호 동물이며 ()의 고유 동물입니다.",
"Akey": "칭하이-티베트 고원", "Bkey": "신장",
"Ckey": "칭하이", "Dkey": null, "NUM": 2 },
{ "Id": 1, "Type": "X", "Content": "야생동물을 보호한다는 것은 많은 의미를 갖고 있는데, 그 의미가 아닌 것은",
"Akey": "환경적 영향", "Bkey": "문화적 가치",
"Ckey": "값 보기", "Dkey": null, "NUM": 1 }
]
}</span>
이를 HTML로 표시하고 json 구문 분석 및 데이터의 계층적 표시를 포함하는 편집 및 삭제 작업을 구현하는 방법:
HTML 표시 태그:
<ul id="msg" name="msg"> </ul>
JavaScript는 데이터를 구문 분석하고 다음을 표시합니다.
다음과 같이 코드 코드를 복사합니다.
<span style="font-size:14px;"> var response = xmlHttp.responseText;
eval("var 결과 =" + 응답);
var len = 결과.테이블.길이;
만약 (len > 0) {
var msg = "";
for (var i = 0; i < len; i++) {
msg += "<li><span>" + result.Table[i].Content + "</span>";
msg += "<span>" + result.Table[i].Akey + "</span>";
msg += "<span>" + result.Table[i].Bkey + "</span>";
msg += "<span>" + result.Table[i].Ckey + "</span>";
msg += "<span>" + result.Table[i].Dkey + "</span>";
msg += "<a href='###' onclick=/"editSub('" + result.Table[i].Id + "')/">편집</a>";
msg += " <a href='###' onclick='Delete(" + result.Table[i].Id + ")'>삭제</a>";
msg += "</li>";
}
document.getElementById("msg").innerHTML = msg;
}</span>
각 데이터 조각은 editSub(id) 및 Delete(id) 함수를 통해 처리되어 ListBox와 유사한 기능을 달성할 수 있습니다.