使用jquery,我如何迭代xml中的每个节点?
问题描述:
我有关于下面的示例代码的另一个问题。使用jquery,我如何迭代xml中的每个节点?
下面index.html文件
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<style>
#frm, #raw {display:block; float:left; width:210px},
#raw {height:150px; width:310px; margin-left:0.5em}
</style>
<title> INDEX </title>
</head>
<body>
<form id="frm">
Profile: <select id="profiles">
<option> </option>
</select>
<br></br>
Format:<select id="formats">
<option value="json"> JSON </option>
<option value="xml"> XML </option>
</select>
<br></br>
<div id="output"></div>
</form>
<textarea id="raw"></textarea>
</body>
<script>
$.get("http://localhost:8080/profiles",function (profile_names) {
$.each(profile_names, function (i, pname) {
$("#profiles").append("<option>" + pname + "</option>");
});
}, "json");
$("#formats, #profiles").change(function() {
var format = $("#formats").val();
$.get("http://localhost:8080/profile/" + $("#profiles").val() + "." + format,
function (profile, stat, jqXHR) {
var cT = jqXHR.getResponseHeader("Content-Type");
$("#raw").val(profile);
$("#output").html('');
if (cT === "application/json") {
$.each($.parseJSON(profile), function (k, v) {
$("#output").append("<b>" + k + "</b> : " + v + "<br>");
});
return;
}
if (cT === "application/xml") {
xmlDoc = $.parseXML(profile),
$xml = $(xmlDoc);
$($xml).each(function(){
$("#output").append($(this).text() + "<br/>");
});
}
},
"text");
});
</script>
</html>
其次,server.js文件
var http = require('http');
var fs = require('fs');
var path = require('path');
var profiles = require('./profiles');
var xml2js = require('xml2js');
var index = fs.readFileSync('index.html');
var routes, mimes = {xml: "application/xml", json: "application/json"}
function output(content, format, rootNode) {
if (!format || format === 'json') {
return JSON.stringify(content);
}
if (format === 'xml') {
return (new xml2js.Builder({rootName: rootNode})).buildObject(content);
}
}
routes = {
'profiles': function (format) {
return output(Object.keys(profiles), format);
},
'/profile': function (format, basename) {
return output(profiles[basename], format, basename);
}
};
http.createServer(function (request, response) {
var dirname = path.dirname(request.url),
extname = path.extname(request.url),
// $.get('http://localhost:8080/profile/' + $('#profiles').val() + '.' + format
basename = path.basename(request.url, extname);
extname = extname.replace('.', ''); //remove period
response.setHeader("Content-Type", mimes[extname] ||'text/html');
if (routes.hasOwnProperty(dirname)) {
response.end(routes[dirname](extname, basename));
return;
}
if (routes.hasOwnProperty(basename)) {
response.end(routes[basename](extname));
return;
}
response.end(index);
}).listen(8080);
下面
是profiles.js文件
module.exports = {
ryan: {
name: "Ryan Dahl",
irc: "ryah",
twitter: "ryah",
github: "ry",
location: "San Francisco, USA",
description: "Creator of node.js"
},
isaac: {
name: "Isaac Schlueter",
irc: "isaacs",
twitter: "izs",
github: "isaacs",
location: "San Francisco, USA",
description: "Former project gatekeeper, CTO npm, Inc."
}
};
在index.html文件,
经过if(cT ===“application/xml”){与JSON相比无法正常工作。
其实,原来的示例代码是这样
if (cT === "application/xml") {
profile = jqXHR.responseXML.firstChild.childNodes;
$.each(profile, function (k, v) {
if (v && v.nodeType === 1) {
$("#output").append("<b>" + v.tagName + "</b> : " + v.textContent + "<br>");
}
});
但高于一个没有工作,所以我搜索的方式来显示所有在
选择一个子节点和文本。
是否有任何方式让XML显示与在index.html文件中选择的JSON相同的格式?
谢谢你理解dissy问题!
答
我发现了我想要显示的元素名称和文本。
if (cT === "application/xml") {
var xmlDoc =$.parseXML(profile);
var $xml = $(xmlDoc);
var kids = $xml.children().children();
kids.each(function(){
var tagName=this.tagName;
var val=$(this).text();
$("#output").append("<b>" + tagName + "</b> : " + val + "<br>");
});
}
我不知道为什么,但当配置文件被解析为'tj'时,下面是结果。
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<tj>
<name>TJ Holowaychuk</name>
<irc>tjholowaychuk</irc>
<twitter>tjholowaychuk</twitter>
<github>visionmedia</github>
<location>Victoria, BC, Canada</location>
<description>Author of express, jade and many other modules</description>
</tj>
因此,$ xml的第一个孩子是<tj> </tj>
。所以我用了两次children()方法,然后
我可以迭代所有<tj> </tj>e
的孩子,然后打印孩子的姓名和文本。
是否有人可以清楚地解释我的代码
请让我知道。
谢谢。
不是'$ xml.children()'你想迭代什么?正如你在这里试图遍历应该是单一的根元素。顺便说一句'$ xml'已经是一个jQuery元素了,可能为什么以$为前缀,所以不需要重新包装$ $($ xml)'这已经足够了'$ xml' – GillesC 2014-09-05 00:04:58
@gilesc我发现了一种新的显示方式他们的每个子元素名称和文本。你可以看到这个问题的答案。和大约$($ xml)的东西,我只是参考[链接](http://api.jquery.com/jQuery.parseXML/)在这里。我不知道确切的原因。 – MinLoveSu 2014-09-05 18:46:19