ajax实战篇---城市select联动----XML交互

来源：互联网发布：妇幼保健网络信息系统编辑：程序博客网时间：2024/06/08 01:36

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>      <title>城市联动效果</title>    <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><meta http-equiv="content-type" content="text/html;charset=utf-8"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><script type="text/javascript"><!--//第一步---------------------创建ajax引擎      function getXmlHttpObject(){                    var xmlHttpRequest;          //不同的浏览器获取对象xmlhttprequest 对象方法不一样          if(window.ActiveXObject){                            xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");//这个是ie内核                        }else{                xmlHttpRequest=new XMLHttpRequest();//非ie内核          }            return xmlHttpRequest;//将创建创建的ajax引擎实例化        }        var myXmlHttpRequest="";//设置全局变量 为了后面的chuli 函数需要取得属性      //第二步---------------------获取数据并发送服务器 function sendRequest(){ myXmlHttpRequest=getXmlHttpObject();//从实例化的模型里面的方法函数   if(myXmlHttpRequest){var url="./CityList.php";//url 属性 选择提交的地址              var data="provice="+$('sheng').value;//数据 id为sheng的数据取得数据              myXmlHttpRequest.open("post",url,true);//这里选择提交的方式post  异步操作            myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//打开请求.                //指定为了第四步处理做准备回调函数.chuli是函数名              myXmlHttpRequest.onreadystatechange=chuli;              //第二部--------------------------发送数据到服务器端              myXmlHttpRequest.send(data);  }}//第四步------------------------------------------------对返回的数据进行处理处理函数function chuli(){//成功返回if(myXmlHttpRequest.readyState==4){if(myXmlHttpRequest.status==200){            var cities=myXmlHttpRequest.responseXML.getElementsByTagName("city");//这里获取xml的标签 切记注意大小写               $('city').length=0;            for(var i=0;i<cities.length;i++){              var city_val=cities[i].childNodes[0].nodeValue;    //创建optiion     var myOption=document.createElement("option");  myOption.value=city_val;  myOption.innerText=city_val;  $('city').appendChild(myOption);                       }          }}}  function $(id){          return document.getElementById(id);      }  --></script>  </head>    <body>    <select id="sheng" onchange="sendRequest();">    <option value="">---省---</option>    <option value="zhejiang">浙江</option>    <option value="jiangsu" >江苏</option>    </select>    <select id="city">    <option value="">--城市--</option>    </select>         <select id="county">    <option value="">--县城--</option>    </select>  </body></html>

<?php//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式header("Content-Type: text/xml;charset=utf-8");//告诉浏览器不要缓存数据header("Cache-Control: no-cache");//获取用户提交城市名$province=$_POST['provice'];//第三步-------------------------------------准备返回xml格式的结果..$result="";if($province=="zhejiang"){$result="<states><city>绍兴</city><city>杭州</city><city>温州</city><city>义乌</city></states>";}else if($province=="jiangsu"){$result="<states><city>南京</city><city>盐城</city><city>苏州</city></states>";}echo $result;?>

阅读全文

0 0