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调用服务器端的方法很好用。