AJax实现级联菜单:一个菜单onchange时,另两个菜单从数据库读取对应数据并绑定,如何实现?
关键代码:
var url = "Handler.ashx?type=shi&id=" + va;
// 下面根据条件去Handler.ashx捞取数据,并通过populateClass4绑定到控件。如何将省的数据也返回来并绑定到sheng的控件上?
send_request("GET",url,null,"text",populateClass4);下面是全部代码:
前台:<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" >
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script type="text/javascript" src="ajax_func.js"></script>
<script>
function changshi(va)
{
   if(va!='0')
    {
    var qu = document.getElementById("qu");
    qu.disabled = false;
    var url = "Handler.ashx?type=shi&id=" + va;
    // 下面根据条件去Handler.ashx捞取数据,并通过populateClass4绑定到控件。如何将省的数据也返回来并绑定到sheng的控件上?
                        send_request("GET",url,null,"text",populateClass4);
 
                         
                            
    }
}
function populateClass4(){
    var f=document.getElementById("qu");
    if(http_request.readyState==4){
    if(http_request.status==200){
    var list=http_request.responseText;
    var classList=list.split("|");
    f.options.length=1;
    for(var i=0;i<classList.length;i++){
    var tmp=classList[i].split(",");
    f.add(new Option(tmp[1],tmp[0]));
    }
    }else{
    alert("您所请求的页面有异常。");
    }
    }
        }
        
</script>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<FONT face="宋体"></FONT>
<!--省份列表  这里的数据是根据更改city列表得到。。-->

<select id="sheng" style="width: 121px" runat="server">
            <option value="0">
--请选择省--
</option>
        </select>
<!--城市列表  页面载入时绑定-->
<select id="city" runat="server" onchange="changshi(this.value)">
<option value="0">
--请选择市--
</option>
</select>
<!--区的列表   这里的数据是根据更改city列表得到-->
<select id="qu" runat="server" >
<option value="0">
--请选择区--
</option>
</select>
    <br />
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                <br />
    <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
</form>
</body>
</html>Handler.ashx<%@ WebHandler Language="C#" Class="Handler" %>using System;
using System.Web;
using System.Data.SqlClient;
using System.Data;public class Handler : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        string type = context.Request.QueryString["type"];
        if (type.Equals("sheng"))
        {
            string id = context.Request.QueryString["id"];
            context.Response.ContentType = "text/plain";
            context.Response.Write(getsh1(id));//这个是从数据库中根据传来省的id 查询出来的。市的名字和主键,主键以便去查区的名字
        }
        else if (type.Equals("shi"))
        {
            string id = context.Request.QueryString["id"];            
            context.Response.ContentType = "text/plain";
            context.Response.Write(getqu(id));
            context.Response.Write(getsh1(id));//这个是从数据库中根据传来省的id 查询出来的。市的名字和主键,主键以便去查区的名字    
        }
    }    public string getqu(string shi)
    {
        DataSet ds = SqlDataAccess.GetAreaInfo(shi);
        string str = "";
        for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
        {
            if (i == ds.Tables[0].Rows.Count - 1)
            {
                str += ds.Tables[0].Rows[i]["code"].ToString() + "," + ds.Tables[0].Rows[i]["name"].ToString();
            }
            else 
            {
                str += ds.Tables[0].Rows[i]["code"].ToString() + "," + ds.Tables[0].Rows[i]["name"].ToString() + "|"; 
            }
        }
        return str.Trim(); 
    }
    public string getsh1(string shi)
    {
        //DataSet ds = SqlDataAccess.GetAreaInfo(shi);
        DataSet ds1 = SqlDataAccess.GetProvinceInfo1(shi);
        string str1 = "";
        for (int i = 0; i < ds1.Tables[0].Rows.Count; i++)
        {
            if (i == ds1.Tables[0].Rows.Count - 1)
            {
                str1 += ds1.Tables[0].Rows[i]["code"].ToString() + "," + ds1.Tables[0].Rows[i]["name"].ToString();
            }
            else
            {
                str1 += ds1.Tables[0].Rows[i]["code"].ToString() + "," + ds1.Tables[0].Rows[i]["name"].ToString() + "|";
            }
            str1 = str1 + "|";
        }
        return str1.Trim();
    }
   /* public string getSheng(string sheng)
    {
        //DataSet ds = SqlDataAccess.GetCityInfo(sheng);
        DataSet ds = SqlDataAccess.GetProvinceInfo1(sheng);
        string str = "";
        for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
        {
            if (i == ds.Tables[0].Rows.Count - 1)
            {
                str += ds.Tables[0].Rows[i]["code"].ToString() + "," + ds.Tables[0].Rows[i]["name"].ToString();
            }
            else
            {
                str += ds.Tables[0].Rows[i]["code"].ToString() + "," + ds.Tables[0].Rows[i]["name"].ToString() + "|";
            }
        }
        return str.Trim();
    }
    */
    
    
    public bool IsReusable {
        get {
            return false;
        }
    }}Ajax级联菜单

解决方案 »

  1.   

    所使用的源代码下载地址 http://www.51aspx.com/code/myAjaxDropdownlist
      

  2.   

    可以考虑返回json数据,如:省、市的数据已json的形式返回。应该没有问题的。格式如下:
    string jsonTemp="{
    \"sheng\":[
    {\"key\":\"value\"},
    {\"key\":\"value\"},
    {\"key\":\"value\"}
    ]
    ,
    \"shi\":[
    {\"key\":\"value\"},
    {\"key\":\"value\"},
    {\"key\":\"value\"}
    ]
    }"然后Ajax返回的json数据在前台解析一下就可以了。
      

  3.   

    一般是将List<T> 转成Json格式的字符串然后让前台去解析。
      

  4.   

    不管返回啥数据都行,现在是只要在changshi()中添加和区一样的代码就什么数据都不返回,不添加还能返回区的数据,唉,应该是返回的数据被冲掉了吧
      

  5.   

    传值到到handler.ashx中是要返回数据,返回来的数据在populateClass4()中通过list绑定到select控件上,我是想在changshi中同时传值并将返回的两中不同数据绑定sheng和qu两个控件上。
      

  6.   

    ztree + ajax 满足你的要求
      

  7.   


    那就以不同的格式将他分开,在前台进行解析嘛比如后台输出:{数据1-数据2};
    前台进行解析出:数据1
                    数据2
    嗯,但现在是数据无法返回是不能取到数据还是不能办出数据还是不能解析数据?
    一步一步看,数据无法返回这个问题太广义了,定位到具体的步骤吧。
    调试的时候在handler.ashx中有数据
    context.Response.Write(getqu(id));
    context.Response.Write(getsh1(id));
    没注释的地方有数据返回,把注释掉的地方取水注释,就没有数据了,最关键的地方populateClass5,list没数据。function changshi(va)
    {
        if(va!='0')
        {
            var qu = document.getElementById("qu");
            alert(va);     
            var url="Handler.ashx?type=shi&id="+va;
            send_request("GET", url, null, "text", populateClass4);         /////////////
          /*  
                                var sheng = document.getElementById("sheng");
            var url1 = "Handler.ashx?type=sheng&id=" + va;
            send_request("GET", url1, null, "text", populateClass5);
        */
        }
    } function populateClass4() {
        populateClass5()
        var f=document.getElementById("qu");
        if(http_request.readyState==4){
        if(http_request.status==200){
        var list=http_request.responseText;
        var classList=list.split("|");
        f.options.length=1;
        for(var i=0;i<classList.length;i++){
        var tmp=classList[i].split(",");
        f.add(new Option(tmp[1],tmp[0]));
        }
        }else{
        alert("您所请求的页面有异常。");
        }
        }}
    function populateClass5() {
        var f1 = document.getElementById("sheng");
        if (http_request.readyState == 4) {
            if (http_request.status == 200) {
                var list1 = http_request.responseText;
                var classList1 = list1.split("|");
                f1.options.length = 1;
                for (var i = 0; i < classList1.length; i++) {
                    var tmp = classList1[i].split(",");
                    f1.add(new Option(tmp[1], tmp[0]));
                }
            } else {
                alert("您所请求的页面有异常111。");
            }
        }
    }