JQuery解析XML（学习日记）

最新推荐文章于 2024-08-02 14:16:34 发布

咯咯咯咯咯咯咯咯

最新推荐文章于 2024-08-02 14:16:34 发布

阅读量188

点赞数

分类专栏： jquery xml解析文章标签： jquery xml

本文链接：https://blog.csdn.net/weixin_38343591/article/details/78715062

版权

jquery 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

xml解析

1 篇文章 0 订阅

订阅专栏

xml数据以书籍为例
id=编号
name=书名
author=作者

book.xml

<?xml version="1.0" encoding="UTF-8"?>
<books>
    <book>
    <id>001</id>
    <name>论语</name>
    <author>孔子</author>
    </book>

    <book>
    <id>002</id>
    <name>孙子兵法</name>
    <author>孙武 </author>
    </book>

    <book>
    <id>003</id>
    <name>三国演义</name>
    <author>罗贯中</author>
    </book>

</books>

前端JQuery代码
bookXml.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script src="../js/jquery-3.2.1.min.js"></script>
        <script type="text/javascript"> 
            jQuery(document).ready(function() {
                $.get("book.xml", function(xmlData) {
                    var htmlData = "<table border='1'>";
                    $(xmlData).find("book").each(function() {
                        var book = $(this); 
                        //var book = book.attr("ProductID"); 
                        var id = book.find("id").text(); 
                        var name = book.find("name").text(); 
                        var author = book.find("author").text();
                        htmlData += "<tr>";
                        htmlData += " <td>" + id + "</td>";
                        htmlData += " <td>" + name + "</td>";
                        htmlData += " <td>" + author + "</td>";
                        htmlData += "</tr>";
                    });

                    htmlData += "</table>";
                    $("body").append(htmlData);
                });
            });
        </script>
    </body>
</html>