HTML读取XML

最新推荐文章于 2021-07-01 21:45:30 发布

菜鸟小俊

最新推荐文章于 2021-07-01 21:45:30 发布

阅读量760

点赞数

本文链接：https://blog.csdn.net/yangjajun/article/details/105114322

版权

一、xml是html非常相似，他属于一个纯文本可以使用JQ来进行读取，但是要读取xml必须处于服务器环境（这个可用node建一个非常容易）
二、xml数据结构

<?xml version="1.0" encoding="utf-8"?>
<!-- 与css文件对应  -->
<?xml-stylesheet type="text/css" href="cssformat.css"?>
<students>
 <student>
 <sn>20040112</sn>
 <name>张三</name> 
 <sex>男</sex> 
 <nation>汉族</nation>  
 <add>山东</add>   
 <pro>计算机</pro>
 </student>
 <student>
 <sn>20040201</sn>
 <name>李四</name> 
 <sex>女</sex> 
 <nation>汉族</nation>  
 <add>山东</add>   
 <pro>计算机</pro>
 </student>
 <student>
 <sn>20031514</sn>
 <name>王五</name> 
 <sex>女</sex> 
 <nation>汉族</nation>  
 <add>山东</add>   
 <pro>计算机</pro>
 </student>
 <student>
 <sn>20031514</sn>
 <name>赵六</name> 
 <sex>女</sex> 
 <nation>汉族</nation>  
 <add>山东</add>   
 <pro>计算机</pro>
 </student>
</students>

三、html读取

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<!-- 引入jq -->
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<style>
    th {
        text-align: center;
    }
</style>

<body>
    <!-- 创建table列表 -->
    <table id="table" border-collapse:collapse;>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>名族</th>
            <th>户籍</th>
            <th>专业</th>
        </tr>
    </table>
</body>
<script>
    // 发起ajax请求
    $.ajax({
        url: './xml.xml',
        type: 'GET',
        dataType: 'xml',

        success: function (xml) {
            console.log($("#table")[0])
            //读取目标xml内容
            $(xml).find('student').each(function (i) {
                let sn = $(this).children('sn').text()
                let name = $(this).children('name').text()
                let sex = $(this).children('sex').text()
                let nation = $(this).children('nation').text()
                let add = $(this).children('add').text()
                let pro = $(this).children('pro').text()

                // let oldinerhtml = $('#table')[0].innerHTML
                //将xml类容添加到table列表
                $('#table').append(`<tr>
                    <th>${sn}</th>
                    <th>${name}</th>
                    <th>${sex}</th>
                    <th>${nation}</th>
                    <th>${add}</th>
                    <th>${pro}</th>
                    </tr>`)
                
            })
        }

    });
</script>

</html>