Question

我还有一个关于以下示例代码的问题。

下面是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相同的格式？

感谢您理解烦恼的问题!!!

Answer 1

我找到了我想要显示的元素名称和文字的方式。

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>");
    });     
}

我不知道为什么，但是当为＆＃39; tj＆＃39;解析个人资料时，下面是结果。

<?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个孩子，然后打印孩子的姓名和文字。

是否有人可以清楚地解释我的代码

请告诉我。

谢谢。

使用jquery，我如何迭代xml中的每个节点？

1 个答案: