zoukankan      html  css  js  c++  java
  • Jquery 操作xml 文档的方法

     需求: 页面上有两个下拉框,显示游戏大区 和游戏服务器,当游戏大区改变时,游戏服务器也跟着改变

    界面部分html代码

    <tr class="tkSigUser">
                <th>游戏大区:</th>
                <td>
                    <asp:DropDownList ID="gamezonedll"  runat="server"></asp:DropDownList>                
                </td>
                <td></td>
            </tr>
            <tr class="tkSigUser">
                <th>服务器名:</th>
                <td>                
                    <select id="serverddl" name="serverdll"></select>
                    <input type="hidden" name="serverName" />                
                </td>
                <td></td>
            </tr>

    xml文档内容

    在ready部分 页面初始化时根据大区ID加载服务器信息 ,当大区变更时change事件,服务器信息变化。

    var xmDoc;//用于装载请求到的xml文档
    
    使用ajax 异步请求xml文档并处理
    
     $(document).ready(function () {
    
            $.ajax({
                url: "../js/xinhejiguang.xml",
                dataType: 'xml',
                type: 'get',
                error: function () {
                    alert("加载区服信息失败");
                },
                success: function (xml) {
                    xmlDoc = xml; //将xml保存起来,可以在其他地方接着使用,不用再次请求
                    var gamezoneid = $("#<%=gamezonedll.ClientID %> option:selected").val();
                    findServer(gamezoneid);
                }
    
            });
    
            $("#<%=gamezonedll.ClientID %>").change(function () {
                var id = $("#<%=gamezonedll.ClientID %> option:selected").val();
                $("#serverddl").empty();
                findServer(id);
            });
    
        });
     //根据大区ID,查找服务器信息并添加到 服务器节点
        function findServer(zoneid) {
            var gameServerList = $(xmlDoc).find("game[id='10123']").find("gameZone[id='"+zoneid+"']").find("gameServer");
            gameServerList.each(function (index, content) {
                var serverid = $(content).attr("id");
                var servername = $(content).attr("name");
                $("#serverddl").append("<option value='" + serverid + "'>" + servername + "</option>");
            });
        
        }

    程序采用的是web form ,.net 2.0平台。所以使用了服务器端控件。开始的设想是 大区 、服务器都使用web服务器控件,在page_Load 方法中初始化加载区服信息,

    用jquery 异步改变服务器的值,但是在提交时出现 回发或回调参数无效 的错误,

    网上查找基本回答都是一样的 http://hi.baidu.com/chy_daima/item/733e963fd63dccb8134b148c

    但是这些方法都不好用,简单方法 禁用 EnableEventValidation="false" ,会导致在behindcode 中获取不到你修改的控件的值,只是获取原来的值。

    开始用js取新的服务器信息是用下边的方法:

    webform 在前台js中调用后台代码的方法:

    首先在Page_Load 中 写上 

     Ajax.Utility.RegisterTypeForAjax(typeof(xinhejiguang));

    xinhejiguang 是后台的类名

    然后再后台写方法

            [Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
            public string GetGameServer(string zoneId)
            {
                XmlDocument jiguang = new XmlDocument();
                string filepath = AppDomain.CurrentDomain.BaseDirectory + "zc\js\xinhejiguang.xml";
                jiguang.Load(filepath);
    
                XmlNode zonenode = jiguang.SelectSingleNode("/company/gameList/game[@name='极光世界']/gameZoneList/gameZone[@id=" + zoneId + "]");
                XmlNodeList serverlist = zonenode.SelectNodes("gameServerList/gameServer");
                StringBuilder buider = new StringBuilder();
    
                foreach (XmlNode server in serverlist)
                {
                    string serverid = server.Attributes["id"].Value;
                    string servername = server.Attributes["name"].Value;
                    buider.AppendFormat("{0}:{1}|", serverid, servername);
                }
    
    
                buider.Remove(buider.Length - 1, 1);
                return buider.ToString();
            }

    那么 在前台 js 就可以通过

    var id = 11159;
    var result = xinhejiguang.GetGameServer(id).value;

    来调用后台程序,得到服务器信息。然后再进行split 分割,加载。

    这个方法对于用js调用服务器端的方法很好用。

  • 相关阅读:
    006使用python编写一个猜数字的程序
    002python函数、高级特性
    008python绘制五个五角星
    005使用 Python 生成 200 个激活码
    001python基础
    003python函数式编程,模块
    004python面向对象,错误,调试和测试
    Docker系列之(一):10分钟玩转Docker
    mongoDB系列之(一):10分钟玩转mongoDB
    Hadoop系列之(二):Hadoop集群部署
  • 原文地址:https://www.cnblogs.com/zhouxiuquan/p/3669132.html
Copyright © 2011-2022 走看看