ajax中网页传输(三)XML——下拉列表显示练习

XML:页面之间传递数据,跨平台传递

HTML:超文本标记语言,核心标签

XML的形势为

<xml version=‘1.0‘>
<Nation>
        <one>
                <code>n001</code>
                <name>汉族</name>
        </one>
        <two>
                <code>n002</code>
                <name>苗族</name>
        </two>
</Nation>

  根据xml的书写形式得到他的特点

1.标签名可以自己定义
2.有且只有一个根
3.标签要完整
4.大小写敏感

以xml返回数据类型显示“民族下拉列表”

一、body网页显示部分

<title>XML下拉显示Nation表中的数据</title>
<script src="../json/jquery-2.0.0.min.js"></script>
</head>

<body>
<h1>xml下拉显示Nation表中的数据</h1>
<select id="sel">
</select>
</body>

  

二、JScript中ajax以xml返回数据的代码<script type="text/javascript">

$(document).ready(function(e) {
$.ajax({
	      url:"chuli.php",
		  dataType:"XML",
		  success: function(data){

			  var ch=$(data).find("nation").children();

			  var str="";

			  for(var i=0;i<ch.length;i++)
			  {
				  var code=$(ch[i]).find("code").text();
			          var name=$(ch[i]).find("name").text();

				  str+="<option value=‘"+code+"‘>"+name+"</option>";
			  }

			  $("#sel").html(str);

			  }
       });
}) 
         $(data).find("nation").children();  代表查询data数据中nation标签里的子标签
         $(ch[i]).find("code").text();       指查找第i个ch数据中code标签的内容

三、ajax中需要调用的chuli.php代码

<?php
include("../json/DBDA.class.php");
$db=new DBDA();

$sql="select * from nation";

$attr=$db->Query($sql);

echo "<nation>";

foreach($attr as $k=>$v)
{
	echo "<shuju{$k}>";

	echo "<code>{$v[0]}</code>";
	echo "<name>{$v[1]}</name>";

	echo "</shuju{$k}>";
}

echo "</nation>";

  chuli.php中echo后面的代码要和xml的书写形式一样

时间: 2024-12-16 21:06:37

ajax中网页传输(三)XML——下拉列表显示练习的相关文章

ajax中网页传输(一)TEXT——带有删除功能的数据库表格显示练习

网页之间传输的三种方式:TEXT.JSON.XML. 本章将讲解带有TEXT形势的ajax网页传输 第一:body部分代码 <title>ajax中TEXT讲解并且带有删除功能的表格</title> <script src="jquery-2.0.0.min.js"></script> <style type="text/css"> .sc { width:70px; height:30px; backgr

ajax中网页传输(二)JSON——下拉列表显示练习

以json返回数据类型显示“民族下拉列表” 第一:body页面显示部分 <title>JSON下拉显示Nation表中的数据</title> <script src="jquery-2.0.0.min.js"></script> </head> <body> <h1>用下拉显示Nation表中的数据</h1> <select id="sel"> </se

ExtJS问题(1)- Ajax中LoadMask未显示的问题

首先,介绍下问题, 缘由:我用Ext.Ajax来获取数据,由于后台数据较多,所以在Ajax前调用了下LoadMask来显示等待遮罩,待获取数据后取消遮罩. 现象:遮罩未显示,我在chrome中断点代码,断点到显示遮罩后.调用Ajax前的时候遮罩显示. 代码:(Ext版本4.2) var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."}); myMask.show(); Ext.Ajax.request({  

ajax中的stasus错误详解

一.英文版解析 0: (Uninitialized) the send( ) method has not yet been invoked. 1: (Loading) the send( ) method has been invoked, request in progress. 2: (Loaded) the send( ) method has completed, entire response received. 3: (Interactive) the response is be

关于Ajax中http协议

关于ajaxajax是异步的JavaScript和XML,优点是无刷新的与后天通信并获取数据,只更改页面中需要更改的部分,而不是刷新整个页面,减少无意义的数据传输,提高了效率和用户体验 1.协议和HTTP协议.HTTP协议,它规定了在网络中发布.传输和接收html页面的方法.大家都遵循这个协议,就能实现信息的传输.2.HTTP协议典型的工作流程. 客户端和服务器端没有任何联系--建立连接,客户端发送请求--沿着建立好的连接,服务器端返回响应信息--断开连接.3.HTTP请求信息的格式. 请求信息

ajax中error函数参数详解

xhr.status和error函数中的status是不一样的,error函数中的status主要包括:"success"."notmodified"."error"."timeout"."parsererror",而xhr.status如下所讲. 一.error:function (XMLHttpRequest, textStatus, errorThrown) { } (默 认: 自动判断 (xml 或

转:AJAX中xhr对象详解

XJAX ,并不是一种新技术的诞生.它实际上代表的是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用. 它包括: 使用XHTML和CSS标准化呈现: 使用DOM实现动态显示和交互: 使用XML和XSLT进行数据交换与处理: 使用XMLHttpR XJAX ,并不是一种新技术的诞生.它实际上代表的是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用. 它包括: 使用XHTML和CSS标准化呈现: 使用DOM实现动态显示和交互: 使用XML和XSLT进行数据交换与处理: 使用XMLHt

Apache启用GZIP压缩网页传输方法

一.gzip介绍 Gzip是一种流行的文件压缩算法,如今的应用十分广泛,尤其是在Linux平台.当应用Gzip压缩到一个纯文本文件时,效果是很明显的,大约能够降低70%以上的文件大小.这取决于文件里的内容. 利用Apache中的Gzip模块,我们能够使用Gzip压缩算法来对Apacheserver公布的网页内容进行压缩后再传输到client浏览器.这样经过压缩后实际上降低了网络传输的字节数,最明显的优点就是能够加快网页载入的速度. 网页载入速度加快的优点不言而喻,除了节省流量,改善用户的浏览体验

ajax中XMLHttpRequest 对象

一:XMLHttpRequest 对象的三个重要属性 1.onreadystatechange属性 onreadystatechange属性存有处理服务器响应的函数.下面的代码定义一个空的函数,可同时对 onreadystatechange 属性进行设置: xmlHttp.onreadystatechange=function() { // 我们需要在这里写一些代码 } 2. readyState 属性 readyState 属性存有服务器响应的状态信息.每当readyState 改变时,onr