jquery-如何获取xml数据 – 开发百科-程序代码问答平台

我完全不懂html、css、javascript和编程。请容忍我

我正在尝试使用jquery填充我的表。数据将来自一个xml文件

football\u player.xml：

&lt；？xml version=“1.0”encoding=“UTF-8”？&gt；
&lt；足球运动员&gt；
&lt；名称&gt；克里斯蒂亚诺·罗纳尔多&lt/名称&gt；
&lt；俱乐部&gt；皇家马德里&lt/俱乐部&gt；
&lt；数量&gt；7&lt/数量&gt；
&lt；国家&gt；葡萄牙&lt/国家&gt；
&lt；名称&gt；费尔南多·托雷斯&lt/名称&gt；
&lt；俱乐部&gt；切尔西&lt/俱乐部&gt；
&lt；数量&gt；9&lt/数量&gt；
&lt；国家&gt；西班牙&lt/国家&gt；
&lt；名称&gt；伊克尔·卡西利亚斯&lt/名称&gt；
&lt；俱乐部&gt；皇家马德里&lt/俱乐部&gt；
&lt；数量&gt；1&lt/数量&gt；
&lt；国家&gt；西班牙&lt/国家&gt；
&lt；名称&gt；贝克汉姆&lt/名称&gt；
&lt；俱乐部&gt；洛杉矶银河&lt/俱乐部&gt；
&lt；数量&gt；23&lt/数量&gt；
&lt；国家&gt；英国&lt/国家&gt；
&lt/足球运动员&gt；

我的html表格：

&lt；表&gt；
&lt；thead&gt；
&lt；tr&gt；
&lt；th&gt；名称&lt/th&gt；
&lt；th&gt；俱乐部&lt/th&gt；
&lt；th&gt；数量&lt/th&gt；
&lt；th&gt；国家&lt/th&gt；
&lt/tr&gt；
&lt/thead&gt；
&lt；t车身&gt；
&lt/t车身&gt；
&lt/tfoot&gt；
&lt/tfoot&gt；
&lt/表&gt；

我的javascript/jquery脚本：

$（文档）.ready（函数（）{
$.ajax({
键入：“获取”，
url:“football_player.xml”，
数据类型：“xml”，
成功：函数（xml）{
$（xml）.find（“football_player”）.each（函数（）{
$（“表tbody”）。追加（“&lt；tr&gt；”）；
$（“table tbody”）.append（“&lt；td&gt；”+$（this）.find（“name”）.text（）+”&lt；/td&gt；”）；
$（“table tbody”）.append（“&lt；td&gt；”+$（this）.find（“club”）.text（）+”&lt；/td&gt；”）；
$（“table tbody”）.append（“&lt；td&gt；”+$（this）.find（“number”）.text（）+”&lt；/td&gt；”）；
$（“table tbody”）.append（“&lt；td&gt；”+$（this）.find（“country”）.text（）+”&lt；/td&gt；”）；
$（“表tbody”）。追加（“&lt；/tr&gt；”）；
});
}
});
});

我发誓我真的是个笨蛋。我不知道我在做什么。请帮忙。我真的很想学习。提前谢谢

示例XML：

&lt；？xml版本=&quot；1.0“；编码=&quot；utf-8“&燃气轮机；
&lt；最新书籍&gt；
&lt；书籍&gt；
&lt；标题&gt；我最酷的书名&lt/标题&gt；
&lt；说明&gt；《我的酷书》可能是最好的酷书，因为任何开发人员都可以成为伟大的网页设计师。&lt/说明&gt；
&lt；日期&gt；2010年1月12日&lt/日期&gt；
&lt/书籍&gt；
&lt；书籍&gt；
&lt；标题&gt；另一本PHP书籍&lt/标题&gt；
&lt；说明&gt；通过“另一本PHP书”了解所有关于PHP的知识，这是您了解PHP的基本指南。&lt/说明&gt；
&lt；日期&gt；2010年4月1日&lt/日期&gt；
&lt/书籍&gt；
&lt；书籍&gt；
&lt；标题&gt；jQuery技术&lt/标题&gt；
&lt；说明&gt；jQuery技术让您了解jQuery的真实示例，从初学者到专家&lt/说明&gt；
&lt；日期&gt；2010年6月2日&lt/日期&gt；
&lt/书籍&gt；
&lt；书籍&gt；
&lt；标题&gt；MySQL数据库手册&lt/标题&gt；
&lt；说明&gt；用市场上最好的MySQL数据库书籍来复习你的知识&lt/说明&gt；
&lt；日期&gt；2010年2月14日&lt/日期&gt；
&lt/书籍&gt；
&lt/最新书籍&gt；

以及HTML&amp；jquery

$（文档）.ready（函数（）{
$.ajax({
类型：“获取”；，
url:“books.xml”；，
数据类型：“xml”；，
成功：xmlParser
});
});
函数xmlParser（xml）{
$（“#加载”）.fadeOut（）；
$（xml）.find（”Book“）.each（函数（）{
$（&quot；main&quot；）.append（&quot；div class=&quot；book&quot；&gt；&gt；&quot；div class=&quot；title&quot；+$（this）.find（&quot；title&quot；.text（）+）&lt；/div&gt；&lt；div class=&quot；description&quot；+$（this）.查找（&quot；description&quot；）.text（））.text+）.find（&quot；&quot；说明）&quot；&quot；&quot；&quot；&quot；&quot；&quot；&quot；&quot；&quot；&quot；&quot；&quot；&quot；&quot；&quot；&quot；&quot；&+”&lt；/div&gt；&lt；/div&gt；）；
$（“book”）.fadeIn（1000）；
});
}
&lt；div class=&quot；“主要”&燃气轮机；
&lt；div align=&quot；中心“；类别=“类”；装载机&燃气轮机&书信电报；img src=”等；loader.gif“；id=”号；“加载”；宽度=”；16“；高度=”；11“；align=&quot；absmiddle&quot/&燃气轮机&lt/部门&gt；
&lt/部门&gt；
&lt；div class=&quot；清晰的&燃气轮机&lt/部门&gt；

你可以通过这个例子，你会得到同样的想法

相关文章：

发表评论 取消回复

发表评论取消回复