jQuery ajax解析xml文件demo

解析xml文件，然后将城市列表还原到下拉列表框中；当选择下拉列表框时，在对应的文本框中显示该城市信息。

前端代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery ajax解析xml文件demo</title>
<script type="text/javascript" src="jquery.min.js"></script>
</head>

<body>
<input type="button" value="加载xml文件" onClick="cityajax();this.disabled = true;"><br>
城市列表:
<select id="list">
</select>
<br>
城市信息：
<textarea id="texts"></textarea>
    
<script>
function cityajax(){
    var olist=$("#list");
    var otext=$("#texts");
    var arr=new Array();
    $.ajax({
        url:"/city_xml/XML/city.xml",
        type:"POST",
        dataType:'xml',
        success:function(xml){
            $(xml).find("City").each(function(i) {
                //获取城市名字
                var cityName=$(this).attr("Name");
                //添加到下拉框,设置内容
                $("<option></option>").appendTo(olist).text(cityName);
                //获取城市信息，并存入数组中
                var cityText=$(this).find("Description").text();
                arr[i]=cityText;
                changetext();
            });
        },
        error:function(){ alert("加载失败"); }
    })
    //选择不同城市对应信息发生改变
    function changetext(){
        var _index=olist.find("option:selected").index();
        otext.text(arr[_index]);
    }
    olist.change(changetext)
}
</script>
</body>
</html>

 

xml文件：

<?xml version="1.0" encoding="gb2312"?>
<CityList>
    <City Name="北京">
        <Description>京有着三千余年的建城史和八百五十余年的建都史...</Description>
    </City>
    <City Name="上海">
        <Description>上海，中国大陆第一大城市；四个中央直辖市之一</Description>
    </City>
    <City Name="广州">    
        <Description>广州，简称穗，别称羊城、穗城、穗垣、仙城、花城；解放前旧称省城。</Description>
    </City>
    <City Name="成都">    
        <Description>位于四川省中部，是中西部地区重要的中心城市。西南地区科技中心、商贸中心、金融中心和交通通信枢纽。</Description>
    </City>
    <City Name="沈阳">    
        <Description>沈阳，辽宁省省会，中国15个副省级城市之一，中国七大区域中心城市之一</Description>
    </City>
</CityList>

代码在ie8及以下版本xml加载失败。哪位朋友有好的意见欢迎提出。

posted @ 2017-03-13 22:18  安静的女汉纸  阅读(4419)  评论(0)  编辑  收藏  举报