JavaScript 解析数据库 Xml 字段并展示在页面

背景与思路

在项目开发中，若需将数据库内Xml字段的信息直接通过SQL语句提取并展示于页面，处理逻辑往往过于繁琐。为此，一种更优的方案是先从数据库读取Xml字段数据，随后利用JavaScript对该数据进行解析与操作，从而简化实现过程。基于此思路，经过资料查阅与验证，成功实现了通过JS读取并处理Xml字段信息的方法。

页面控件选择注意事项

首先，在HTML页面中需放置一个TextBox控件用于承载Xml字段数据。需要特别注意，严禁使用Label控件。原因在于，若Xml字段内容中包含双引号（"）等特殊符号，使用Label控件可能导致页面出现JavaScript执行错误。

接下来是核心实现部分，具体JavaScript代码如下：

function createXml(str){ 
　　if(document.all){ 
　　　　var xmlDom=new ActiveXObject("Microsoft.XMLDOM") 
　　　　xmlDom.loadXML(str) 
　　　　return xmlDom 
　　} 
　　else 
　　　　return new DOMParser().parseFromString(str, "text/xml") 
} 

//上述代码的作用是将字符串实例化为Xml对象

完成解析后，即可对生成的Xml对象进行具体操作：

window.onload=function () { 
var str=document.getElementById("ctl00_ContentPlaceHolder1_TextBox1").value; 
var obj=createXml(str); 

//得到根节点 
var root_node=obj.documentElement; 

var yh1=""; 
for (i=0;i< root_node.childNodes[0].childNodes.length-1;i++) 
{ 
yh1+=" "+(i+1)+"、"+root_node.childNodes[0].childNodes[i].getAttribute("Remark")+":"+root_node.childNodes[0].childNodes[i].firstChild.nodeValue ; 


yh1+="<br/>" 

} 
document.getElementById("ctl00_ContentPlaceHolder1_lblContent").innerHTML=yh1; 
} 

}

示例Xml数据格式如下：

<Info Remark="文件模板"><Common Remark="通用配置"><DisCopy Remark="复印件折扣">100</DisCopy><DisOriginal Remark="折扣">100</DisOriginal><ArrearageLimit Remark="欠费上限">0</ArrearageLimit><YearPrice Remark="年费，元/年">0</YearPrice></Common></Info>