Jquery操作Xml
Jquery1.2开始不再支持XPath表达式。
<?xml version="1.0" encoding="utf-8" ?>
<catalog>
<book format="trade">
<name>Jennifer Government</name>
<author>Max Barry</author>
<price curr="CAD">15.00</price>
<price curr="USD">12.00</price>
</book>
<book format="trade">
<name>xennifer xovernment</name>
<author>xax Barry</author>
<price curr="CAD">18.00</price>
<price curr="USD">12.00</price>
</book>
<book format="textbook">
<name>Unity Game Development Essentials</name>
<author>Will Goldstone</author>
<price curr="CAD">52.00</price>
<price curr="USD">45.00</price>
</book>
<book format="textbook">
<name>UNIX Visual QuickPro</name>
<author>Chris Herborth</author>
<price curr="CAD">15.00</price>
<price curr="USD">10.00</price>
</book>
</catalog>
<catalog>
<book format="trade">
<name>Jennifer Government</name>
<author>Max Barry</author>
<price curr="CAD">15.00</price>
<price curr="USD">12.00</price>
</book>
<book format="trade">
<name>xennifer xovernment</name>
<author>xax Barry</author>
<price curr="CAD">18.00</price>
<price curr="USD">12.00</price>
</book>
<book format="textbook">
<name>Unity Game Development Essentials</name>
<author>Will Goldstone</author>
<price curr="CAD">52.00</price>
<price curr="USD">45.00</price>
</book>
<book format="textbook">
<name>UNIX Visual QuickPro</name>
<author>Chris Herborth</author>
<price curr="CAD">15.00</price>
<price curr="USD">10.00</price>
</book>
</catalog>
$(document).ready(function () {
$.ajax({
url: "/Test.xml",
dataType: "xml",
type: "get",
success: function (xml) {
var books = $(xml).find("book[format='trade']");
books.each(function (index, item) {
var json = {
name: $(this).children("name").text(),
author: $(this).children("author").text(),
priceCAD: $(this).children("price[curr='CAD']").text(),
priceUSD: $(this).children("price[curr='USD']").text()
};
var jsonStr = $.param(json);//序列化json
$("#box").append("<div>" + jsonStr + "</div>");
});
},
error: function () {
alert('未能正确加载该文件')
}
});
});
$.ajax({
url: "/Test.xml",
dataType: "xml",
type: "get",
success: function (xml) {
var books = $(xml).find("book[format='trade']");
books.each(function (index, item) {
var json = {
name: $(this).children("name").text(),
author: $(this).children("author").text(),
priceCAD: $(this).children("price[curr='CAD']").text(),
priceUSD: $(this).children("price[curr='USD']").text()
};
var jsonStr = $.param(json);//序列化json
$("#box").append("<div>" + jsonStr + "</div>");
});
},
error: function () {
alert('未能正确加载该文件')
}
});
});
XPath路径表达式
XPath路径表达式用于在XML文档中查找节点,对节点进行遍历操作。
基本概念
1.一份XML文档分元素、属性、文本(原子值,文本节点没有任何祖先节点)、命名空间、处理指令、注释以及文档节点(根节点),节点以Node表示,父(Parent)、子(Children)、兄弟(Sibling)、祖先(Ancestor)、后代(Descendant)。属性节点是作为元素节点的子节点,而文本节点则不属于元素节点的子节点。
2.nodeValue(节点值) | nodeType(节点类型) | nodeName(节点名称) | textContent(节点包含的文本)
属性节点的nodeValue是属性的值。文本节点的nodeValue是文本自身。文本节点的nodeName永远返回#text,元素节点没有nodeValue。
例子
<?xml version="1.0" encoding="utf-8" ?>
<catalog>
<book format="trade" id="res">
<name>Jennifer Government</name>
<author>Max Barry</author>
<price curr="CAD" >15.00</price>
<price curr="USD">12.00</price>
</book>
<book format="trade" id="rxes">
<name>xennifer xovernment</name>
<author>xax Barry</author>
<price curr="CAD">18.00</price>
<price curr="USD">12.00</price>
</book>
<book format="textbook">
<name>Unity Game Development Essentials</name>
<author>Will Goldstone</author>
<price curr="CAD">52.00</price>
<price curr="USD">45.00</price>
</book>
<book format="textbook">
<name>UNIX Visual QuickPro</name>
<author>Chris Herborth</author>
<price curr="CAD">15.00</price>
<price curr="USD">10.00</price>
</book>
<x>
<book format="xxxxx">
<name>xxxxx</name>
<author>xxxxx</author>
<price curr="CAD">xxxxx</price>
<price curr="USD">xxxxx</price>
</book>
</x>
</catalog>
<catalog>
<book format="trade" id="res">
<name>Jennifer Government</name>
<author>Max Barry</author>
<price curr="CAD" >15.00</price>
<price curr="USD">12.00</price>
</book>
<book format="trade" id="rxes">
<name>xennifer xovernment</name>
<author>xax Barry</author>
<price curr="CAD">18.00</price>
<price curr="USD">12.00</price>
</book>
<book format="textbook">
<name>Unity Game Development Essentials</name>
<author>Will Goldstone</author>
<price curr="CAD">52.00</price>
<price curr="USD">45.00</price>
</book>
<book format="textbook">
<name>UNIX Visual QuickPro</name>
<author>Chris Herborth</author>
<price curr="CAD">15.00</price>
<price curr="USD">10.00</price>
</book>
<x>
<book format="xxxxx">
<name>xxxxx</name>
<author>xxxxx</author>
<price curr="CAD">xxxxx</price>
<price curr="USD">xxxxx</price>
</book>
</x>
</catalog>
// 加载xml文档
function loadXML(xmlFile) {
var xmlDoc;
if (window.ActiveXObject) {
xmlDoc = new ActiveXObject('Microsoft.XMLDOM');//IE浏览器
xmlDoc.async = false;
xmlDoc.load(xmlFile);
}
else if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) { //火狐浏览器
//else if (document.implementation && document.implementation.createDocument) {//这里主要是对谷歌浏览器进行处理
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;
}
//根据指定的XPATH表达式查找满足条件的所有节点
//@param xmldoc 执行查找的节点
//@param sXpath xpath的表达式
function selectNodes(xmldoc, sXpath) {
if (window.ActiveXObject) {
//IE浏览器
return xmldoc.selectNodes(sXpath);
} else if (window.XPathEvaluator) {
//FireFox类浏览器
var xpathObj = new XPathEvaluator();
if (xpathObj) {
var result = xpathObj.evaluate(sXpath, xmldoc, null, XPathResult.ORDERED_NODE_ITEARTOR_TYPE, null);
var nodes = new Array();
var node;
while ((node = result.iterateNext()) != null) {
nodes.push(node);
}
return nodes;
} else {
return null;
}
} else {
return null;
}
}
function loadXML(xmlFile) {
var xmlDoc;
if (window.ActiveXObject) {
xmlDoc = new ActiveXObject('Microsoft.XMLDOM');//IE浏览器
xmlDoc.async = false;
xmlDoc.load(xmlFile);
}
else if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) { //火狐浏览器
//else if (document.implementation && document.implementation.createDocument) {//这里主要是对谷歌浏览器进行处理
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;
}
//根据指定的XPATH表达式查找满足条件的所有节点
//@param xmldoc 执行查找的节点
//@param sXpath xpath的表达式
function selectNodes(xmldoc, sXpath) {
if (window.ActiveXObject) {
//IE浏览器
return xmldoc.selectNodes(sXpath);
} else if (window.XPathEvaluator) {
//FireFox类浏览器
var xpathObj = new XPathEvaluator();
if (xpathObj) {
var result = xpathObj.evaluate(sXpath, xmldoc, null, XPathResult.ORDERED_NODE_ITEARTOR_TYPE, null);
var nodes = new Array();
var node;
while ((node = result.iterateNext()) != null) {
nodes.push(node);
}
return nodes;
} else {
return null;
}
} else {
return null;
}
}
$(document).ready(function () {
var xml = loadXML("/Test.xml");
var xPath = "/catalog/book"; //获取根catalog节点下面的所有book子节点
var books = selectNodes(xml, xPath);
books.forEach(function (item, index, books) {
alert(item.textContent);//当前节点包含的所有原子值(文本)
//alert(item.nodeName);
//alert(item.nodeType);
//alert(item.nodeValue);
});
});
var xml = loadXML("/Test.xml");
var xPath = "/catalog/book"; //获取根catalog节点下面的所有book子节点
var books = selectNodes(xml, xPath);
books.forEach(function (item, index, books) {
alert(item.textContent);//当前节点包含的所有原子值(文本)
//alert(item.nodeName);
//alert(item.nodeType);
//alert(item.nodeValue);
});
});
规则
/*注意*/
/*xPath表达式获取的默认都是节点的集合*/
/*如果表达式起始以/开头,则表示节点的绝对路径,
如果以//开头,则表示无视嵌套层级关系(无视路径),
如果不以/开始,则表示获取所有最上层的指定的节点
/..表示当前节点的父节点
*/
/*路径表达式,路径表达式只能获取元素节点,如果要获取属性节点,则使用谓词,获取文本节点则使用node.textContent*/
//用于提取节点
var xPath = "/catalog"; //获取根节点
var xPath = "book"; //获取处于最顶层(相对而言)的所有book节点,如上面的xml文档中的x节点下的book将不会被获取
var xPath = "/catalog/book"; //获取根catalog节点下面的所有book子节点
var xPath = "/catalog/book/."; //获取根catalog节点下面的所有book节点
var xPath = "/catalog/book/.."; //获取根catalog节点下面的所有book节点的父节点,在此例子中是获取根
var xPath = "//book"; //获取文档中所有的book节点,双斜杠表示不从根开始,无视嵌套的层级获取文档中所有指定的节点,不管节点处于怎样的位置,只要在文档中就会被获取
var xPath = "book//name";//获取book节点下的所有的name子节点,无视name的嵌套层级
/*谓词,这些谓词都可以搭配以上的路径表达式*/
//用于进一步过滤节点
var xPath = "/catalog/book[1]"; //第一个
var xPath = "/catalog/book[last()]"; //最后一个
var xPath = "/catalog/book[last()-1]"; //倒数第二个
var xPath = "/catalog/book[position()<3]"; //靠前的两个
var xPath = "/catalog/book[@format]"; //必须具有format属性
var xPath = "/catalog/book[@format='trade']"; //必须具有format属性且值为trade
var xPath = "*"; //所有节点
var xPath = "@*"; //所有属性节点
var xPath = "/catalog/book[price>30.00]"; //获取book节点,但book包含的price节点所包含的文本必须>30.00
var xPath = "/catalog/book[price>30.00]/title"; //获取book下的title节点,但book包含的price节点所包含的文本必须>30.00
var xPath = "/catalog/book/price | /catalog/book/name"; //和 ,集合会按顺序先存储price,再存储name
var xPath = "/catalog/book/price | //name"; //和,集合会按顺序先存储price,再存储文档中无视嵌套层级的name
/*轴,这些轴都可以搭配以上的路径表达式*/
var xPath = "/catalog/book/price/ancestor::book"; //祖先元素节点,获取price的祖先元素节点book
var xPath = "/catalog/book/descendant::price"; //后代元素节点,获取book的后代元素节点price
var xPath = "/catalog/book/ancestor-or-self::book"; //祖先元素节点以及自身,获取book的祖先元素节点以及自身
var xPath = "/catalog/book/child::*"; //所有子元素节点
var xPath = "/catalog/book/child::price"; //子元素节点,子元素节点必须是price
var xPath = "/catalog/book/child::*/child::price"; //所有子元素节点的子元素,子元素必须是price
var xPath = "/catalog/book/child::node()"; //所有子节点
var xPath = "/catalog/book/price/attribute::*"; //price的所有属性节点
var xPath = "/catalog/book/price/child::text()"; //price的所有文本节点
var xPath = "/catalog/book/price[text()='12.00']"; //price包含的文本=12.00的文本节点
var xPath = "/catalog/book[starts-with(@id,'r')] "; //具有id属性且id属性的值以r开头的book元素节点,此方法只能用于属性节点
var xPath = "/catalog/book[contains(@id,'e')] "; //具有id属性且id属性的值包含了e字符的book元素节点 此方法只能用于属性节点
/*运算符,这些运算符都可以搭配以上的路径表达式*/
//+、-、*、div、=、!=、<、>、<=、>=、and、mod
var xPath = "/catalog/book[price div 2 > 10 ]"; //按计算结果获取book元素节点,条件:price所包含的文本÷2>10的book节点。
/*xPath表达式获取的默认都是节点的集合*/
/*如果表达式起始以/开头,则表示节点的绝对路径,
如果以//开头,则表示无视嵌套层级关系(无视路径),
如果不以/开始,则表示获取所有最上层的指定的节点
/..表示当前节点的父节点
*/
/*路径表达式,路径表达式只能获取元素节点,如果要获取属性节点,则使用谓词,获取文本节点则使用node.textContent*/
//用于提取节点
var xPath = "/catalog"; //获取根节点
var xPath = "book"; //获取处于最顶层(相对而言)的所有book节点,如上面的xml文档中的x节点下的book将不会被获取
var xPath = "/catalog/book"; //获取根catalog节点下面的所有book子节点
var xPath = "/catalog/book/."; //获取根catalog节点下面的所有book节点
var xPath = "/catalog/book/.."; //获取根catalog节点下面的所有book节点的父节点,在此例子中是获取根
var xPath = "//book"; //获取文档中所有的book节点,双斜杠表示不从根开始,无视嵌套的层级获取文档中所有指定的节点,不管节点处于怎样的位置,只要在文档中就会被获取
var xPath = "book//name";//获取book节点下的所有的name子节点,无视name的嵌套层级
/*谓词,这些谓词都可以搭配以上的路径表达式*/
//用于进一步过滤节点
var xPath = "/catalog/book[1]"; //第一个
var xPath = "/catalog/book[last()]"; //最后一个
var xPath = "/catalog/book[last()-1]"; //倒数第二个
var xPath = "/catalog/book[position()<3]"; //靠前的两个
var xPath = "/catalog/book[@format]"; //必须具有format属性
var xPath = "/catalog/book[@format='trade']"; //必须具有format属性且值为trade
var xPath = "*"; //所有节点
var xPath = "@*"; //所有属性节点
var xPath = "/catalog/book[price>30.00]"; //获取book节点,但book包含的price节点所包含的文本必须>30.00
var xPath = "/catalog/book[price>30.00]/title"; //获取book下的title节点,但book包含的price节点所包含的文本必须>30.00
var xPath = "/catalog/book/price | /catalog/book/name"; //和 ,集合会按顺序先存储price,再存储name
var xPath = "/catalog/book/price | //name"; //和,集合会按顺序先存储price,再存储文档中无视嵌套层级的name
/*轴,这些轴都可以搭配以上的路径表达式*/
var xPath = "/catalog/book/price/ancestor::book"; //祖先元素节点,获取price的祖先元素节点book
var xPath = "/catalog/book/descendant::price"; //后代元素节点,获取book的后代元素节点price
var xPath = "/catalog/book/ancestor-or-self::book"; //祖先元素节点以及自身,获取book的祖先元素节点以及自身
var xPath = "/catalog/book/child::*"; //所有子元素节点
var xPath = "/catalog/book/child::price"; //子元素节点,子元素节点必须是price
var xPath = "/catalog/book/child::*/child::price"; //所有子元素节点的子元素,子元素必须是price
var xPath = "/catalog/book/child::node()"; //所有子节点
var xPath = "/catalog/book/price/attribute::*"; //price的所有属性节点
var xPath = "/catalog/book/price/child::text()"; //price的所有文本节点
var xPath = "/catalog/book/price[text()='12.00']"; //price包含的文本=12.00的文本节点
var xPath = "/catalog/book[starts-with(@id,'r')] "; //具有id属性且id属性的值以r开头的book元素节点,此方法只能用于属性节点
var xPath = "/catalog/book[contains(@id,'e')] "; //具有id属性且id属性的值包含了e字符的book元素节点 此方法只能用于属性节点
/*运算符,这些运算符都可以搭配以上的路径表达式*/
//+、-、*、div、=、!=、<、>、<=、>=、and、mod
var xPath = "/catalog/book[price div 2 > 10 ]"; //按计算结果获取book元素节点,条件:price所包含的文本÷2>10的book节点。