一、业务需求:
将少量数据(主要是字典数据)放入XML文件中,并在JSP页面中进行解析,将数据以下拉框的形式展现在页面中。
二、代码实现
1、XML文件 dropDownList.xml
<?xml version="1.0" encoding="UTF-8"?>
<root>
<fieldType>
<type value = "1" >字符串</type>
<type value = "2" >数字</type>
<type value = "3" >日期</type>
<type value = "4" >布尔型</type>
</fieldType>
<inputType>
<type value = "1" >单选框</type>
<type value = "2" >复选框</type>
<type value = "3" >下拉框</type>
<type value = "4" >文本框</type>
<type value = "5" >文本域</type>
</inputType>
</root>
2、JSP 文件
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<section class="content-header">
<h1>
解析XML文件 <small>解析XML文件</small>
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> home</a></li>
<li class="active">Here</li>
</ol>
</section>
<!-- Main content -->
<section id="" class="content">
<div class="row">
<div class="col-md-9">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">XML文件解析</h3>
</div>
<!-- /.box-header -->
<!-- form start -->
<div class = "box-body">
<select name = "xmlTest" id = "xmlTest" >
</select>
</div>
</div>
</div>
</div>
</section>
<!-- /.content -->
<SCRIPT type="text/javascript">
//加载xml文档
function loadXML (xmlFile) {
var xmlDoc = null;
if (window.ActiveXObject) {
xmlDoc = new ActiveXObject('Microsoft.XMLDOM');//IE浏览器
xmlDoc.async = false;
xmlDoc.load(xmlFile);
}else if (isFirefox=navigator.userAgent.indexOf("Firefox")>0) { //火狐浏览器
xmlDoc = document.implementation.createDocument('', '', null);
xmlDoc.load(xmlFile);
}else{ //谷歌浏览器
var xmlhttp = new window.XMLHttpRequest();
xmlhttp.open("GET",xmlFile,false);
xmlhttp.send(null);
if(xmlhttp.readyState == 4){
xmlDoc = xmlhttp.responseXML.documentElement;
}
}
return xmlDoc;
}
// 首先对xml对象进行判断
function checkXMLDocObj (xmlFile) {
var xmlDoc = loadXML(xmlFile);
if (xmlDoc == null) {
alert('您的浏览器不支持xml文件读取,于是本页面禁止您的操作,推荐使用IE5.0以上可以解决此问题!');
}
return xmlDoc;
}
var xmlDoc = checkXMLDocObj('dropDownList.xml');//xml文件放在同一目录下
alert(xmlDoc + "1111111111111");
var obj={};
//var arr = [];
var arr = new Array();
$(document).ready(function () {
var nodes;
if(window.ActiveXObject){
nodes = xmlDoc.getElementsByTagName('collage')[0].childNodes; //读取XML文件中需要显示的数据
}else if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
nodes = xmlDoc.getElementsByTagName('fieldType')[0].children; //读取XML文件中需要显示的数据
}else{
nodes = xmlDoc.getElementsByTagName('fieldType');
}
alert(nodes.length);
for (var j = 0; j < nodes.length; j++) {
var resource = nodes[j];
var value = resource.getAttribute('value');
var name = resource.getText();
$("#xmlTest").append('<option value = '+value+'>'+name+'</option>');
}
});
</SCRIPT>
三
、总结
A、加载XML文件,这里要区分不同的浏览器
B 、读取XML文件的数据信息
C、使用append动态拼接生成下拉选框