jQuery的 ajax 加载XML并解析

最新推荐文章于 2019-12-26 18:03:11 发布

桦世兵权

最新推荐文章于 2019-12-26 18:03:11 发布

阅读量863

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： jquery xml json javascript ajax

本文链接：https://blog.youkuaiyun.com/u010782160/article/details/41048845

web前端专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何使用jQuery的AJAX加载XML文件并进行解析处理，通过具体示例展示了从XML中提取数据并动态生成HTML内容的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<pre name="code" class="html"><strong><span style="font-size:18px;">使用jQuery的  ajax 加载XML并解析，先是页面文件show.html ,贴上主要操作的地方(ps:路径、类的样式什么的可以自己修改，这个代码不是死定的，这个主要给大家提供一个参考)</span></strong>

<strong><span style="font-size:18px;">
</span></strong>

<pre name="code" class="html"><span style="font-size:12px;"><div class="lesson" id="displayLesson">
            <ul>
              <li>
                <div class="img">
                 <a href="file/三分屏/样式1/index.html" target="_blank"> <img src="file/三分屏/样式1/1.jpg" alt="" /><p>三分屏</p></a> 
                 </div>
                <a href="file/三分屏/样式1/index.html" target="_blank"> <strong>课程名称：</strong>第三方物流实践课程体系介绍 </a>
              </li>
            
              <li>
                <div class="img"> <a href="file/三分屏/样式2/index.html" target="_blank"> <img src="file/三分屏/样式2/1.jpg" alt="" />
                  <p>教育培训远程研修课程</p>
                  </a> </div>
                <a href="file/三分屏/样式2/index.html" target="_blank"> <strong>课程名称：</strong>健康领域的理解与实施 </a> </li>
            </ul>
            <div class="clear"></div>
          </div></span>

<strong><span style="font-size:18px;">下面 是imdex.xml文件，和show.html文件放一起</span></strong>

<strong><span style="font-size:18px;">
</span></strong>

<!--index.xml文件-->

<?xml version="1.0" encoding="GB2312" ?> 

 <!--资源开发-->
 <head>
     <!-- 三分屏 -->
 	<show id="0">
 		<content id="0">
 			<url>file/三分屏/样式1/index.html</url>
 			<img>file/三分屏/样式1/1.jpg</img>
 			<name>三分屏</name>
 			<courseName>第三方物流实践课程体系介绍</courseName>
 		</content>
 		<content id="1">
 			<url>file/三分屏/样式2/index.html</url>
 			<img>file/三分屏/样式2/1.jpg</img>
 			<name>教育培训远程研修课程</name>
 			<courseName>健康领域的理解与实施</courseName>
 		</content>
 	</show>

    <!-- PPT课程改造 -->
 	<show id="1">
 		<content id="0">
 			<url>file/PPT课程改造/第七单元 第1节 戏曲音乐/index.html</url>
 			<img>file/PPT课程改造/第七单元 第1节 戏曲音乐/1.jpg</img>
 			<name>音乐欣赏</name>
 			<courseName>戏曲</courseName>
 		</content>
 		<content id="1">
 			<url>file/PPT课程改造/刑法基本原则导出/index.html</url>
 			<img>file/PPT课程改造/刑法基本原则导出/1.jpg</img>
 			<name>音乐欣赏</name>
 			<courseName>戏曲</courseName>
 		</content>
 	</show>

</head>

<pre name="code" class="html"><strong><span style="font-size:18px;">下面是 index.js文件</span></strong>

var data = new Array();//于存放读取xml获得的数据

//jQuery的  ajax 加载XML并解析

showDiv();

function showDiv()
{
    $.ajax(
    {
        url : "index.xml", 
        dataType : 'xml',
        type : 'GET',
        timeout : 2000,
        error : function (xml) 
        {
            alert("加载XML 文件出错！");
        },
        success : function (xml) 
        {
            $(xml).find("show").each(function (i) 
            {
                data[i] = new Array();
                var $show = $(this);
                $show.find("content").each(function (j) 
                {
                    var obj = {};
                    var $content = $(this);
                    obj.url = $content.children("url").text();
                    obj.img = $content.children("img").text();
                    obj.name = $content.children("name").text();
                    obj.courseName = $content.children("courseName").text();
                    data[i][j] = obj;
                });
                ///后续操作。。。
            });
            changeDiv();//刷新div层
        }
    });
}

//刷新div层
function changeDiv() 
{
    if (data.length != 0) 
    {
        //读取xml成功
        var shtml = '';
        shtml += '<ul>';
        for (var i = 0; i < data[num].length; i++) 
        {
            shtml += '<li>';
            shtml += '<div class="img">';
            if (num == 4) 
            {
                //打开的是mooc课件 需要特殊处理
                {
                    shtml += '<a onClick="change(\'' + data[num][i].url + '\')" target="_blank">';
                }
            }
            else {
                shtml += '<a href="' + data[num][i].url + '" target="_blank">';
            }
            shtml += '<img src="' + data[num][i].img + '" alt="">';
            shtml += '<p>' + data[num][i].name + '</p></a>';
            shtml += '</div>';
            if (num == 4) 
            {
                //打开的是mooc课件 需要特殊处理
                {
                    shtml += '<a onClick="change(\'' + data[num][i].url + '\')" target="_blank">';
                }
            }
            else {
                shtml += '<a href="' + data[num][i].url + '" target="_blank">';
            }
            shtml += '<strong>课程名称：</strong>' + data[num][i].courseName + '</a></li>';
        }
        shtml += '</ul><div class="clear"></div>';
        document.getElementById('displayLesson').innerHTML = shtml;
        //替换原先的内容
    }
    else {
        document.getElementById('displayLesson').innerHTML = '没有信息!';
        //替换原先的内容
    }
}

PS:代码太多，选取了部分，如果完全照抄，可能无法运行，这个仅提供一个学习参考，大家应该根据自己的实际情况来修改。