在AJAX里 使用【 XML 】 返回数据类型 实现简单的下拉菜单数据

在AJAX里 使用XML返回数据类型 实现简单的下拉菜单数据

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.11.2.min.js"></script>
</head>
<!--find关键字,找哪个标签名-->
<!--eq关键字是取全部,想取单个就给他指定一个数取哪个-->

<body>

<select id="sel">
</select>

<script type="text/javascript">
$.ajax({
        url:"xmlchuli.php",  //url跳转到指定的页面
        dataType:"XML",  //返回XML数据类型 进下面循环,取出想要的数据
        success: function(data){
                //alert($(data).find("code").eq(1).text());
                //alert($(data).find("nation").attr("bs"));//此方法还可以取标签名里的属性来求出你想显示的值,,fibd找到nation标签名,取他里面定义的bs属性

                var allcode = $(data).find("code");  //find直接找处理页面里所有code标签名 交给allcode
                var allname = $(data).find("name");  //code 和 name在处理页面是成对出现的,所以取出code就能取出name

                var str =""; //定义str为空

                for(var i=0;i<allcode.length;i++)//循环allcode标签取出里面所有的值
                {
                    var code = allcode.eq(i).text();//交给code
                    var name = allname.eq(i).text();//交个name

                    str = str +"<option value=‘"+code+"‘>"+name+"</option>";//根据code,name求出来的值,我要显示name类里的值
                }

                $("#sel").html(str);//$("")找到下拉,将求出来的Name列值放到下拉列表中
            }
    });
</script>
</body>
</html>

处理页面

<?php
include("DBDA.class.php");//include关键字,纯处理页面引用封装好类的代码包
$db = new DBDA(); //造一个接受对象关键字new

$sql = "select * from nation";//访问数据库查询nation表所有数据

$attr = $db->Query($sql);  //执行封装好类里的Query方法,返回索引的二维数组

echo "<nation>";  //将二维数组转换XML格式,先输出<nation></nation>标签,作为XML的根

foreach($attr as $k=>$v) //$k等于从零开始
{
    echo "<n{$k}><code>{$v[0]}</code><name>{$v[1]}</name></n{$k}>";
}

echo "</nation>";

/*
echo "<nation bs=‘1‘>"; //给此标签定义一个bs属性

foreach($attr as $k=>$v)
{
    echo "<n{$k}><code>{$v[0]}</code><name>{$v[1]}</name></n{$k}>";
}

echo "</nation>";
*/

效果

时间: 2024-10-23 15:34:01

在AJAX里 使用【 XML 】 返回数据类型 实现简单的下拉菜单数据的相关文章

在AJAX里 使用【 JSON 】 返回数据类型 实现简单的下拉菜单数据

在AJAX里 使用JSON返回数据类型 实现简单的下拉菜单数据 <!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> &l

bootstrap里的下拉菜单

bootstrap里的下拉菜单用于显示链接列表的可切换.有上下文的菜单.下拉菜单的 JavaScript 插件让它具有了交互性.将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 position: relative; 的元素.然后加入组成菜单的 HTML 代码.以下代码就是生成一个简单的下拉菜单 <div class="dropdown">  <button class="btn btn-default dropdown-togg

ajax实现级联下拉菜单

ajax实现级联下拉菜单非常简单,下面是一个用ajax实现的省市级联的下拉菜单: jsp中在<select>中添加onchange事件,触发该事件调用实现ajax的js: <div> <form action="Pcs" method="post"> 所在省:<select name="pro" id="pro" onchange="chCity();"> &

ajax三级联动下拉菜单

ajax写三级联动,先写一个文件类吧,以后用的时候直接调用即可: 来找一张表: 实现: 中国地域的三级联动:省.市.区: 图: 说一下思路: (1)当用户选择省份的时候触发事件,把当前的省份的id通过ajax发出请求传递到服务端的程序中 (2)比如取中国地域,中国是0001,那么自带号为0001的便是中国地域: 北京的代号为11,那么子代号为11的便是北京时的市区, 也就是说根据主代号查询子代号: (3)服务端根据客户端的请求,查询数据库,并按照一定的格式返回给客户端 显示页面非常简单,只需要一

[ PHP+jQuery ] ajax 多级联动菜单的应用:电商网站的用户地址选择功能 ( 一 ) - 传统下拉菜单

/** jQuery version: 1.8.3 Author: 小dee Date: 2014.11.5 */ 说明:分析其他网站的图片较多,可以在目录跳过直接看本文 demo . 目录: 其他网站分析 亚马逊 淘宝 京东 当当 本文案例 demo1 demo2 [ 后面的博文再写 ] demo3 [ 后面的博文再写 ] 惯例,先看看他山之石,选择了四家比较大的电商网站:亚马逊.淘宝.京东.当当,看看它们的地址联动菜单是怎么做的. 1. 亚马逊[返回目录][下一节:淘宝] 图1 默认界面 说

【easyui-combobox】下拉菜单自动补全功能,Ajax获取远程数据源

这个是针对easyUI的下拉菜单使用的,Ajax获取远程数据源 HTML 页面 <input id="uname" name="uname" class="easyui-combobox" data-options="" style="width: 120px;" /> JS代码 $("#uname").combobox({ prompt:'输入首关键字自动检索', valu

SAP WebIDE一个和Destination相关的问题 - OData下拉菜单里的Destination从哪里来的

我今天做开发遇到一个问题: 我有trial和正式的SAP Cloud Platform账号各一个: 其中trial账号的webIDE连接到productive的CloudFoundry: productive账号的WebIDE也连接到productive的CloudFoundry: 我发现在我新建OData服务时,从Service url的下拉菜单里,选择不到我在SAP云平台里创建的Destination. 怎么感觉trial WebIDE取的Destination来自trial neo环境创建

ajax实现三级联动下拉菜单

先不要着急去实现功能,我们第一步首先要理清思路,想要实现三级联动,首先要有三个下拉框,然后点击第一个下拉菜单,可以联动到第二个,点击第二个联动到第三个,实现省市区的三级联动,用到的数据表如下: 为了以后可以随时拿出来用,我们先在主页面建立一个div叫sanji,然后用一个js页面来引用: 主页面引入Jquery和js: <title>无标题文档</title> <script src="jquery-3.2.0.min.js"></script

Ajax提高篇(7)Ajax实现简单的下拉框联动显示数据

页面中的两个下拉列表框: <tr> <td style="width: 130px"> 所在学院:</td> <td style="width: 100px"> <select id="college" style="width: 200px" runat="server" onchange="changcollege(this.value)&