jquery处理xml

时间：2010-09-10 来源：xue2

前几天用jQuery解析XML内容，发现直接将字符串放到$()中会引起问题，而先用上面的这段代码将字符串可靠的转成一个document对象再交给jQuery可以产生正确的jquery对象。

function create_doc(text){

var xmlDoc = null;

try //Internet Explorer

{

xmlDoc=new ActiveXObject("Microsoft.XMLDOM");

xmlDoc.async="false";

xmlDoc.loadXML(text);

}

catch(e)

{

try //Firefox, Mozilla, Opera, etc.

{

parser=new DOMParser();

xmlDoc=parser.parseFromString(text,"text/xml");

}

catch(e) {}

}

return xmlDoc;

}

----------------------------

先给一个函数，做什么用的？看了就知道。

function loadXML(xmlpath){
var xmlDoc = null;
if (window.ActiveXObject){
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}else
if (document.implementation && document.implementation.createDocument){
xmlDoc = document.implementation.createDocument("","",null);
}else{
alert('Your browser cannot handle this script.');
}
xmlDoc.async = false;
xmlDoc.load(xmlpath);
return xmlDoc;
}

这个函数首先根据用户的浏览器类型来创建一个合适的xml对象xmlDoc,对象创建了之后，接下来应该是导入xml文档了，”xmlDoc.load(xmlpath);”,xmlpath就是你的xml文档的路径了，这样第一步就已经完成了。

下面是我写的一个xml文档：

<?xml version="1.0" encoding="utf-8"?>
<location id="location">
<country id="1" name="中国大陆地区" path="chinabase">
<province id="1" name="北京" path="beijing">
<city id="1" name="东城" path="easttown"></city>
<city id="2" name="西城" path="westtown"></city>
<city id="3" name="崇文" path="chongwen"></city>
<city id="4" name="宣武" path="xuanwu"></city>
<city id="5" name="朝阳" path="chaoyang"></city>
<city id="6" name="丰台" path="fengtai"></city>
<city id="7" name="石景山" path="shijingshan"></city>
<city id="8" name="海淀" path="haidian"></city>
</province>
<province id="2" name="天津" path="tianjin">
<city id="101" name="和平" path="heping"></city>
<city id="102" name="河东" path="hedong"></city>
<city id="103" name="河西" path="hexi"></city>
<city id="104" name="南开" path="nankai"></city>
<city id="105" name="河北" path="hebei"></city>
<city id="106" name="红桥" path="hongqiao"></city>
<city id="107" name="塘沽" path="tanggu"></city>
<city id="108" name="汉沽" path="hangu"></city>
</province>
<province id="3" name="河北" path="hebei">
<city id="201" name="石家庄" path="shijiazhuang"></city>
<city id="202" name="唐山" path="tangshan"></city>
<city id="203" name="秦皇岛" path="qinhuangdao"></city>
<city id="204" name="邯郸" path="handan"></city>
<city id="205" name="邢台" path="xintai"></city>
<city id="206" name="保定" path="baoding"></city>
<city id="207" name="张家口" path="zhangjiakou"></city>
<city id="208" name="承德" path="chengde"></city>
</province>
</country>
<country id="2" name="中国其它地区" path="chinaother">
<province id="101" name="香港" path="hongkong">
<city id="301" name="城东" path="chengdong"></city>
<city id="302" name="城西" path="chengxi"></city>
</province>
<province id="102" name="澳门" path="macao">
<city id="401" name="东门" path="dongmen"></city>
<city id="402" name="西门" path="ximen"></city>
</province>
<province id="103" name="台湾" path="taiwan">
<city id="501" name="台北" path="taibei"></city>
<city id="502" name="高雄" path="gaoxiong"></city>
</province>
</country>
</location>

现在我们就用之前创建的xmlDoc来处理这个xml文档。

xml文档中的内容是这样形式的：“国家>省份>城市”。

我们先获取它包含的国家列表：

//获取国家列表

function getCountries(){
if($(oxml).find("location > country").size()>0){
var countryHtml;
$(oxml).find("country").each(function(){
countryHtml += '<option value="'+$(this).attr("id")+'">'+$(this).attr("name")+'</option>';
})
$(countryHtml).appendTo("#country");
}
}

很简洁的几句话，作用就是获取国家列表然后写成需要的格式的html，再写到”#country”这个div中去。

首先是find()函数，$(oxml).find(”country”)找到所有的”country”；然后用each()函数，意思是对每个”country”都调用each()包含的函数；$(this).attr(”id”)，取得当前元素”id”属性的值。

第一次用xml，了解不深，见笑了。

我做这个东西的时候是用在一个批量上传程序上，用户上传之前需要选择国家省份及城市，程序则根据用户选择的地区逐级创建目录，并将文件上传到相应目录下。下面是源码，有需要的随便拿。doxml