`

JQ 用 ajax 函数读取并解析 XML

 
阅读更多

ajax.xml

<?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>

 

demo.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>加载XML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="editplus" />
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(function() {
	$("button").click(function(){
		$.ajax({
			url:'xml/ajax.xml',
			type: 'GET',
			dataType: 'xml',
			timeout: 1000,
			cache:false,
			error: function(xml){
				alert('加载XML文档出错');
			},
			success: function(xml){
				//建立一个代码片段
				var frag=$("<ul/>");
				//遍历所有student节点
				$(xml).find("student").each(function(i){
					//获取id节点
					var id=$(this).children("id"), 
					//获取节点文本
						id_value=id.text(), 
					//获取student下的email属性。
						email=$(this).attr("email");
					//构造HTML字符串,通过append方法添加进之前建立代码片段
					frag.append("<li>"+id_value+"-"+email+"</li>");
				});
				//最后得到的frag添加进HTML文档中
				frag.appendTo("#load");
			}
		});
	});
});
</script>
</head>
<body>
<button>加载</button>
<div id="load"></div>
</body>
</html>

 

效果图:

 

 

 

  • 大小: 42.2 KB
分享到:
评论

相关推荐

    jquery读取xml

    本篇文章将深入探讨如何使用jQuery来读取XML,并通过实例详细解析相关知识点。 一、jQuery.parseXML()函数 在jQuery中,首先我们需要将XML字符串转换为XML DOM对象。这可以通过使用`jQuery.parseXML()`函数来实现...

    Jquery ajax方式读取txt文件、Jquery分页.

    在给定的标题和描述中,主要涉及两个关键知识点:使用jQuery的AJAX方法读取TXT文件和实现jQuery分页功能。接下来,我们将深入探讨这两个主题。 首先,我们来讨论如何使用jQuery的AJAX方法读取TXT文件。AJAX(异步...

    ajax-xml-aspnet读存数据基础代码

    `System.Xml`库提供了丰富的API,如`XmlDocument`用于加载和操作XML文档,`XmlNode`和`XmlElement`用于遍历和修改XML树,`XmlNodeReader`则提供了一个读取XML流的高效方式。 **4. jQuery与Ajax的结合** `jq.js`中...

    jQuery读取XML文件的方法示例

    上述示例代码中的StandardTaxRate函数展示了如何使用jQuery的ajax方法来读取服务器上位于/Resource/salaryTaxRate.xml路径的XML文件,并处理成功获取到的数据。在success回调函数中,$(xml).find("taxrate").each...

    jQ处理xml文件和xml字符串的方法(详解)

    在本文中,我们将深入探讨如何使用jQuery(简称jQ)处理XML文件和XML字符串。XML(eXtensible Markup Language)是一种数据交换格式,广泛应用于数据传输和存储。jQuery库提供了一种方便的方式来操作和解析XML文档,...

    JS与jQ读取xml文件的方法

    如描述中的代码所示,我们可以使用`$.ajax`方法轻松地读取XML文件。jQuery会自动处理XML解析,并提供方便的DOM遍历方法: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;jQuery 读取XML文件 ; charset=UTF-8" /&gt; h1 { ...

    AJAXCache是一款jQuery缓存插件可以为ajax方法扩展缓存功能

    在Web开发中,AJAX(Asynchronous JavaScript and XML)技术被广泛用于实现页面的部分更新,提高用户体验,而缓存机制则进一步优化了这一过程。 在传统的AJAX请求中,每次用户触发相关操作,都会向服务器发送请求,...

    JQuery 实现XML树形菜单

    \n\n**直接在页面写代码实现树形菜单**\n\n这种方式是基础方法,直接在HTML页面中通过jQuery读取XML文件并解析,然后动态生成树形结构。首先,需要在HTML文件中引入jQuery库(如`jquery-1.2.6.js`),然后编写...

    SSH1,JQuery的ajax返回json二维数组处理过程

    在`success`回调函数中,我们解析JSON数组并创建新的下拉选项。当用户点击“查看详情”按钮时,可能需要发送另一个AJAX请求获取详细信息,并将其显示在`#contentclass`元素内。 在服务器端,SSH1框架中的控制器...

    Jquery读取XML

    当涉及到XML数据的处理时,jQuery提供了一系列的方法,使得读取和解析XML文件变得简单而直观。XML(eXtensible Markup Language)是一种用于存储和传输结构化数据的标准格式,广泛应用于网页应用、数据交换和配置...

    jQuery中通过ajax的get()函数读取页面的方法

    在jQuery中,`$.get()`函数是一个非常常用的方法,用于通过AJAX(异步JavaScript和XML)技术从服务器端获取数据。它简化了与服务器进行通信的过程,无需刷新整个页面即可更新部分网页内容。下面我们将详细讲解`$.get...

    通过Ajax上传图片

    Ajax(Asynchronous JavaScript and XML)是一种创建动态网页的技术,它允许在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。jQuery库简化了JavaScript中的Ajax操作,使得开发者可以更方便地进行...

    jquery+ajax+php文件下载.rar

    其次,Ajax(Asynchronous JavaScript and XML)是一种创建动态网页的技术,允许在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。jQuery库内置了对Ajax的支持,提供了如`$.ajax()`, `$.get()`, `$...

    Q694264 C# ajax读取后台接口,填充给select下拉框

    首先,我们需要理解AJAX(Asynchronous JavaScript and XML)的基本原理。AJAX允许我们在不刷新整个页面的情况下与服务器进行异步通信,提高了用户体验。在JavaScript中,我们通常使用XMLHttpRequest对象或者更现代...

    ajax数据获取及渲染

    我们可以读取这个文件并模拟Ajax请求的响应。 ```javascript $.ajax({ url: 'data.json', type: 'GET', dataType: 'json', success: function(data) { console.log(data); // 打印返回数据 renderData(data);...

    Excel导入功能 前端 JQ JS xlsx.core.min.js

    这个库基于XML和二进制解析,能够高效地处理大量数据,并且兼容现代浏览器。 首先,我们需要在项目中引入xlsx.core.min.js库。这可以通过CDN链接或者将文件下载到本地并引入到HTML文件中完成。例如: ```html ...

    ajax 实现google搜索 模仿了google的搜索

    Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。在本项目中,我们利用Ajax技术模仿了Google的搜索功能,提供了一种实时、无需刷新页面的搜索体验。下面将...

    JQ JS html5 超炫的分类菜单

    最后,我们还可以结合AJAX(异步JavaScript和XML)技术,实现无刷新加载分类内容。当用户点击菜单项时,通过AJAX发送请求到服务器,获取分类信息,然后使用JavaScript动态更新页面内容,这样能提高网页的响应速度和...

Global site tag (gtag.js) - Google Analytics