jQuery AJAX加载XML解析:Content-Type设置与DOM遍历详解
作者:像素猫时间:2026-10-23 20:50:47浏览:649
本文详解使用jQuery通过AJAX加载并解析XML文件的关键步骤。重点阐述动态生成XML时Content-Type必须设为text/xml,以及XML结构需封闭。通过jQuery的find和each方法遍历节点,提取文本与属性,并展示如何动态生成HTML列表。
Content-Type设置与XML结构规范
在解析XML数据时,Content-Type设置不当往往是导致失败的主要原因。
若服务器直接返回标准的XML文件,则可忽略此步骤。
对于动态生成的XML内容,必须显式设置Content-Type为text/xml,否则服务器默认返回text/html,导致解析异常。
不同后端语言设置Content-Type的方法如下:
具体代码实现如下:
header("Content-Type:text/xml"); //php
response.ContentType="text/xml" //asp
response.setHeader("ContentType","text/xml"); //jsp 2,xml结构。
XML文档必须包含完整的根节点,确保结构封闭。
示例如下:
错误的XML结构示例
代码如下:
CODE:
<?xml version="1.0" encoding="UTF-8"?>
<name>zhangsan</name>
<id>1</id>
<name>lisi</name>
<id>2</id>
正确的XML结构示例
CODE:
<?xml version="1.0" encoding="UTF-8"?>
<stulist>
<student email="1@1.com">
<name>zhangsan</name>
<id>1</id>
</student>
<student email="2@2.com">
<name>lisi</name>
<id>2</id>
</student>
</stulist>3,解析
jQuery AJAX解析与节点遍历实现
此处引用macnie的方法,
遍历student节点(基于上述XML,子节点为student)
代码如下:
$.ajax({
url:'ajax.asp',
type: 'GET',
dataType: 'xml',//这里可以不写,但千万别写text或者html!!!
timeout: 1000,
error: function(xml){
alert('Error loading XML document'+xml);
},
success: function(xml){
$(xml).find("student").each(function(i){
var id=$(this).children("id"); //取对象
var id_value=$(this).children("id").text(); //取文本
alert(id_value);//这里就是ID的值了。
alert($(this).attr("email")); //这里能显示student下的email属性。
//最后么输出了,这个是cssrain的写法,貌似比macnie更JQ一点
$('<li></li>')
.html(id_value)
.appendTo('ol');
});
}
});最后补充一条:保证服务器端是utf-8的编码
作者最新文章
vtk.js 渲染窗口黑屏或无内容显示的常见原因及排查
2026-11-05 17:30:30
js-cookie 安装与基础用法:set、get、remove 详解
2026-11-05 16:35:06
适合JavaScript初学者的实战项目:制作简易待办事项列表
2026-11-05 16:17:07
JS打开新标签页时怎么通过URL传递参数
2026-11-05 12:21:08
sigma.js 自定义节点样式:设置颜色、大小及标签显示的技巧
2026-11-05 09:55:00
