JavaScript對於多項資料的請求和處理過程中,如何實現常常困擾很多程式設計師,如何進行動態編輯和刪除而不影響其他的資料項,今天介紹一種方法,可供借鑒,例如透過XmlRequest請求到如下數據:
複製代碼代碼如下:
<span style="font-size:14px;">{ "Table":
[
{ "Id": 3, "Type": "X",
"Content": "黨的十八大報告指出,我國人民民主的重要形式是什麼?",
"Akey": "基層民主政治制度", "Bkey": "人民代表大會制度",
"Ckey": "多黨合作制度", "Dkey": null, "NUM": 3 },
{ "Id": 2, "Type": "X", "Content": "藏羚羊是國家一級保護動物是()特有動物",
"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 result =" + response);
var len = result.Table.length;
if (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的功能。