`

在jQuery中利用AJAX加载XML数据并解析

阅读更多

1,Content-Type
很多时候无法解析就是Content-Type的问题。
如果本身就是xml文件,请跳过这一步
动态生成的XML一定要将其设置为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

<?xml version="1.0" encoding="UTF-8"?>
<name>zhangsan</name>
<id>1</id>
<name>lisi</name>
<id>2</id>

正确的

<?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,解析
这里引用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 idvalue=$(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的编码,否则会乱码!同时也要保证你的xml文件也是utf-8格式的。

分享到:
评论

相关推荐

    jQuery加载并解析XML

    在Web开发中,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互。本篇文章将深入探讨如何使用jQuery来加载和解析XML数据,这是一种常见用于传输和存储结构化数据的方式。 首先,...

    JQuery+AJAX处理XML数据

    在网页开发中,jQuery 和 AJAX 技术的结合是获取和操作服务器端数据的常见方式。本篇将详细探讨如何使用 jQuery 的 AJAX 功能来处理 XML(可扩展标记语言)数据。 **1. jQuery 和 AJAX 简介** jQuery 是一个流行的...

    用JQuery 实现AJAX加载XML并解析的脚本

    本文将详细介绍如何利用JQuery来实现AJAX加载XML数据,并对这些数据进行解析。 #### 二、关键知识点详解 ##### 1. Content-Type 设置 在通过AJAX加载XML文件时,确保服务器正确设置了Content-Type是非常重要的...

    jquery结合ajax和xml实现省市县三级联动

    2. **处理响应**:在 `success` 回调函数中,我们可以接收到服务器返回的数据,然后使用 jQuery 解析 XML 数据(如果返回的是 XML 格式)。例如,使用 `.find()`、`.text()` 和 `.attr()` 等方法遍历 XML 节点,构建...

    Ajax读取xml数据类型例子

    在JavaScript中,我们可以利用AJAX的异步特性,通过XMLHttpRequest对象来获取XML文件并解析其中的数据。 首先,我们需要创建一个XML文件,如`city.xml`,包含城市信息: ```xml 北京 上海 广州 深圳 ``` 接...

    Jquery操作xml_Demo

    通过这个简单的 jQuery 和 XML 操作示例,我们了解了如何使用 jQuery 的 `$.ajax()` 函数加载 XML 文件,以及如何使用 jQuery 的选择器和方法来解析和显示 XML 数据。在实际应用中,可以根据需求进行更复杂的数据...

    jQuery无限级ajax加载菜单代码.zip

    【jQuery无限级ajax加载菜单代码】是一个用于创建动态、多级菜单的JavaScript解决方案,它利用了流行的jQuery库和Ajax技术。这个代码的核心在于其能够异步地从服务器获取JSON数据,然后根据这些数据构建出一个可扩展...

    用AJAX加载 XML 文件网页源代码.rar

    这个“用AJAX加载XML文件网页源代码”示例可能包含了一组教程或实例,展示了如何利用AJAX与XML文件进行交互,以提升用户体验。XML(Extensible Markup Language)则是一种结构化数据格式,常用于存储和传输数据。 ...

    jQuery_Ajax_Json全解析

    在这个例子中,`$.getJSON()`向'data.json'发送请求,当数据返回时,遍历JSON数据的`items`数组,并将每个`title`插入到页面的`#content`元素中,实现了动态加载内容。 总结,jQuery、Ajax和JSON的结合使用,为网页...

    ASP.NET+jquery实现AJAX滚动滚动条加载数据的下拉列表控件

    6. **客户端处理响应**:在AJAX请求的回调函数中,解析返回的JSON数据,并将其插入到下拉列表中。同时,更新加载指示器的状态,告知用户数据正在加载或已加载完毕。 7. **防止重复加载**:为了优化用户体验,需要...

    jQuery中使用Ajax获取JSON格式数据示例代码.pdf

    Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个页面的情况下,能够更新部分网页的技术。jQuery中的Ajax支持让我们可以通过简单的方法来执行AJAX请求。 #### 3. $.getJSON() 方法 `$.getJSON()` ...

    jQuery基于Ajax实现读取XML数据功能示例

    示例中利用jQuery的$.find()方法,对返回的XML文档进行遍历,找到每一个元素,并从中提取出名字和城市信息。通过字符串拼接,构建HTML表格,将这些信息以表格形式添加到页面的&lt;div id="message"&gt;&lt;/div&gt;中。 该示例...

    JQuery 解析XML省 市 县 三级联动

    在这个场景中,可能会使用AJAX从服务器获取XML数据,或者预先加载XML数据到本地。 6. **事件监听与处理**:JQuery提供了丰富的事件处理函数,如`$(selector).on('change', function() {...})`,用于监听下拉菜单的...

    jquery+ajax+asp+mysql加载更多。

    7. **jQuery处理响应**:在AJAX的success回调函数中,解析服务器返回的JSON数据,将新数据插入到页面的适当位置。 8. **用户界面更新**:更新“加载更多”按钮的状态,或者显示已无更多数据的提示。 9. **错误处理...

    用ajax函数读取xml,然后解析XML.html.rar

    用ajax函数读取xml,然后解析XML.html,ajax无刷新读取文件,先使用jQuery加载XML,然后建立一个代码片段,遍历所有student节点,获取id节点,获取节点文本,获取student下的email属性,构造HTML字符串,通过append...

    jquery,ajax的几个小例子

    在Struts2框架中,我们可以利用jQuery的Ajax功能进行数据交互。Struts2提供了JSON结果类型,方便与前端的Ajax请求配合。首先,你需要在Action类中添加JSON支持,并返回一个Map或自定义对象。然后,前端通过$.ajax()...

    jQuery无限级ajax加载树形菜单代码

    "jQuery无限级ajax加载树形菜单代码"是实现这种功能的一种技术方案,它结合了jQuery库的便利性、Ajax的异步加载特性和JSON数据格式的强大。 jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理和Ajax...

    php基于jquery的ajax技术传递json数据简单实例.docx

    在 success 回调函数中,我们将 JSON 数据解析并显示在 HTML 页面上。 PHP 页面 在 PHP 页面中,我们首先获取 POST 请求中的数据,并将其存储在变量中。然后,我们使用 json_encode() 函数将数据编码成 JSON 格式...

    jquery autocomplete 动态补全例子有说明ajax加载

    在给定的“jquery autocomplete 动态补全例子”中,我们将探讨如何实现这一功能,特别关注如何通过AJAX加载JSON数据。 **jQuery Autocomplete基本原理** jQuery UI库包含了Autocomplete组件,它可以与普通的HTML...

Global site tag (gtag.js) - Google Analytics