轻松使用jquery解析XML

news/2024/5/19 17:40:52 标签: XML, jQuery, Flex, JavaScript, 编程

xml文件结构:books.xml

<? xml version="1.0" encoding="UTF-8" ?>
< root >
    
< book  id ="1" >
        
< name > 深入浅出extjs </ name >
        
< author > 张三 </ author >
        
< price > 88 </ price >
    
</ book >
    
< book  id ="2" >
        
< name > 锋利的jQuery </ name >
        
< author > 李四 </ author >
        
< price > 99 </ price >
    
</ book >
    
< book  id ="3" >
        
< name > 深入浅出flex </ name >
        
< author > 王五 </ author >
        
< price > 108 </ price >
    
</ book >
    
< book  id ="4" >
        
< name > java编程思想 </ name >
        
< author > 钱七 </ author >
        
< price > 128 </ price >
    
</ book >
</ root >

页面代码:

<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=UTF-8" >
< title > jquery解析xml </ title >
< script  type ="text/javascript"  src ="js/jquery-1.4.2.min.js" ></ script >
< script  type ="text/javascript" >
    $(
function () {
        $.post('books.xml',
function (data) {
            
// 查找所有的book节点
             var  s = "" ;
            $(data).find('book').each(
function (i) {
                
var  id = $( this ).attr('id');
                
var  name = $( this ).children('name').text();
                
var  author = $( this ).children('author').text();
                
var  price = $( this ).children('price').text();
                s
+= id + " &nbsp;&nbsp;&nbsp;&nbsp; " + name + " &nbsp;&nbsp;&nbsp;&nbsp; " + author + " &nbsp;&nbsp;&nbsp;&nbsp; " + price + " <br> " ;
            }
);
            $('#mydiv').html(s);
        }
);
    }
);
</ script >
</ head >
< body >
    
< div  id ='mydiv' ></ div >
</ body >
</ html >

效果图:


http://www.niftyadmin.cn/n/1003246.html

相关文章

数据处理

为什么80%的码农都做不了架构师&#xff1f;>>> 数据处理并不是只有事务就够了. 经常是这样的, 比如说数据是完整了,一致了, 但是却并不一定达到了客户端的多层次数据要求. 比如首先事务本身的多个层次就很麻烦, 有时候我想要 这个层次,有时候我想要 那个层次, 有…

flex4与Java交互

lex4出来一段时间了,去年看了一段时间flex3,后来由于暂时没有项目需求.所以flex遗忘了很多.这次使用flex4myeclipse8.5录制了一个视频.以免时间长了遗忘. 软件环境:windows7flex4myeclipse8.5blazeds 功能描述:分别用代码实现了三种flex4与Java通信 三…

flex中httpservice与java后台交互的两种传值方式

环境&#xff1a;myeclipse8.5flex4blazeds 描述&#xff1a;flex4中httpservice与服务器端交互的值传递问题 方式一&#xff1a;通过<s:request/>标签进行交互&#xff0c;在该标签内部以要传递的参数名作为该标签内的子标签&#xff0c;值作为…

一个微博数据库设计带来的简单思考

在微博系统中&#xff0c;当前用户、关注者&#xff08;也就是粉丝&#xff09;、被关注者&#xff08;崇拜对象&#xff09; 这三种角色是少不了的。他们之间看似简单的关系&#xff0c;但是其中数据库表将如何设计&#xff0c;却让我很难琢磨&#xff0c;在如下解决方案中&am…

S5PV210 LCD显示

第一节 S5PV210 LCD控制器要使一块LCD正常显示文字或图像&#xff0c;不仅需要LCD驱动器&#xff0c;还需要相应的LCD控制器。LCD控制器的主要作用是将在系统存储器中的显示缓冲区中的LCD图像数据传送到外部LCD驱动器&#xff0c;并产生必要的控制信号&#xff0c;例如VSYNC、H…

页面上显示PDF, 但是不显示工具栏(IE).

有些时候我们要在IE上显示一个PDF, 例如服务器上生成的PDF. 但是不想让用户保存下来. 本质上来说这是实现不了的, 因为显示PDF用的是客户端的acrobat的ActiveX控件. 既然数据已经到了客户端, 想要找到数据的内容总是可以找到的. 下面提供一种方法, 可以把acrobat控件的工具栏隐…

python中的import

import importable import * 这种语法格式将从模块中导入所有对象的(或从包中导入所有模块) from os.path import * 将导入大约40个名称,包含dirname,exists以及split等名称 鉴于import * 这种语法格式潜在的导致名称冲突的语法,有些team在指南中只能使用import importable这种…

程序员的七种武器(转载)

2019独角兽企业重金招聘Python工程师标准>>> 信息技术的发展时间虽然不长&#xff0c;但其爆炸式的发展速度使信息技术迅速覆盖社会和人类生活的各个角落。程序员们是这场信息化浪潮的见证者之一&#xff0c;更是其中的主要参与者&#xff0c;这是时代赋予每个程序员…