JavaScript读取XML文件

背景:使用ArcGIS API for JavaScript做地图开发。后端JS代码中需要获取前端HTML中的各组件ID。为使前后端分离,现使用XML文件存储HTML文件中的各组件ID配对(即一个InnerId对应一个OuterId,InnerId供JS代码里调用,OuterId供前端开发使用)。


写一个方法去根据InnerId获取对应的OuterId:

function getByInnerId(innerId) {
    $.ajax({
        url: COMPONENTID_XML,
        dataType: "xml",
        type: "GET",
        timeout: 1000,
        async: false,


        error: function(xml) {
            console.log("加载XML文件出错!");
        },


        success: function(data) {
            var returnOuterId = "";
            var prefixId = innerId.substr(0, 2);
            console.log(prefixId);


            $(data).find("Components").each(function(group) {
                var findValueTag = 0;
                var groupId = $(this).attr("id");
                if (groupId === prefixId) {
                    console.log("Get the group.");
                    $(this).find("Component").each(function(item) {
                        var itemInnerId = $(this).children("InnerId").text();
                        console.log(itemInnerId);
                        if (itemInnerId === innerId) {
                            var itemOuterId = $(this).children("OuterId").text();
                            if (returnOuterId.length === 0) {
                                returnOuterId = itemOuterId;
                                findValueTag++;
                                return false; //使用return false实现跳出该循环
                            }
                        }
                    });
                }
                if (returnOuterId != null) {
                    return false; //使用return false实现跳出该循环
                }
            });
            return returnOuterId;
        }
    });
}


其中,COMPONENTID_XML内容为:

<?xml version="1.0" encoding="utf-8" ?>
<Content>
  <Components id="NT" name ="NavigationToolbar" alias ="导航工具条">
    <Component>
      <InnerId>NT_ZoomIn</InnerId>
      <OuterId>zoomin</OuterId>
    </Component>
    <Component>
      <InnerId>NT_ZoomOut</InnerId>
      <OuterId>zoomout</OuterId>
    </Component>
    <Component>
      <InnerId>NT_PreviousExtent</InnerId>
      <OuterId>zoomprev</OuterId>
    </Component>
    <Component>
      <InnerId>NT_NextExtent</InnerId>
      <OuterId>zoomnext</OuterId>
    </Component>
  </Components>
  <Components id="TM" name ="ThematicMap" alias ="专题图">
    <Component>
      <InnerId>TM_ThematicMap</InnerId>
      <OuterId>project</OuterId>
    </Component>
    <Component>
      <InnerId>TM_BtnPrevious</InnerId>
      <OuterId>thematicMap_prev_btn</OuterId>
    </Component>
    <Component>
      <InnerId></InnerId>
      <OuterId></OuterId>
    </Component>
  </Components>
</Content>


此外,另一种使用Dojo获取OuterId的方法为:

function getByInnerId(innerId) {
    var resultIdValue;
    var store = new dojox.data.XmlStore({ url: COMPONENTID_XML, rootItem: 'Component' });
    var getOuterId = function (items, request) {
        var i = items.length;
        if (0 < i) {
            var item = items[i];
            var outerId = store.getValue(item, "OuterId");
            var outerIdValue = outerId.element.innerHTML;
            console.log(outerIdValue);
            resultIdValue = outerIdValue;
        }
        return resultIdValue;
    }
    var request = store.fetch({ query: { InnerId: innerId }, queryOptions: { ignoreCase: true }, onComplete: getOuterId });
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值