asp.net实现无刷新二级级联效果 ajax

本文介绍了一个使用JavaScript和XMLHttpRequest实现的动态加载二级下拉列表的方法。当用户在一级下拉列表中选择一个选项时,通过AJAX请求从服务器获取相应的二级列表数据,并更新二级下拉列表。此外,还提供了服务器端处理请求的C#示例代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

页面JavaScript

 

   <script language="javascript" type="text/javascript">

        function XmlPost2(obj) {

            var svalue = obj.value;

            var webFileUrl = "GetSecond.ashx?secondid=" + svalue;

            var result = "";

            var xmlHttp = false;

            if (window.XMLHttpRequest) {

                xmlHttp = new XMLHttpRequest();

            }

            else if (window.ActiveXObject) {

 

                try {

 

                    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

                }

                catch (e) {

                    try {

                        xmlHttp = new ActiveXObject("Mircosoft.XMLHTTP");

                    }

                    catch (e)

                       { }

                }

            }

            else {

                window.alert("你的浏览器版本已经严重过时,请升级后早做操作!");

                return false;

            }

 

            xmlHttp.open("POST", webFileUrl, false);

            xmlHttp.send("");

            if (xmlHttp.readyState == 4) {

                if (xmlHttp.status == 200) {

                    result = xmlHttp.responseText;

                    if (result != "") {

                        document.all("ddlSecond").length = 0;

                        var piArray = result.split(",");

                        for (var i = 0; i < piArray.length; i++) {

                            var ary1 = piArray[i].toString().split("|");

                            document.all("ddlSecond").options.add(new Option(ary1[1].toString(), ary1[0].toString()));

                        }

                    }

                    else {

                        document.getElementById("ddlSecond").options[0] = new Option("请先选择", "");

                        document.getElementById("ddlSecond").length = 1;

                    }

                }

 

            }

        }

        function getData() {

            var second = document.getElementById("ddlSecond");

            var sindex = second.selectedIndex;

            var sValue = second.options[sindex].value;

            var sText = second.options[sindex].text;

            document.getElementById("HideId").value = sValue;

            document.getElementById("HideText").value = sText;

 

        }

    </script>

页面布局:

 

       <asp:HiddenField ID="HideId" runat="server" />

       <asp:HiddenField ID="HideText" runat="server" />

 

     一级类别:<asp:DropDownList ID="ddlFrist" runat="server" DataTextField="HeDescription"

                    DataValueField="HeId"></asp:DropDownList>

     二级类别:<asp:DropDownList ID="ddlSecond" runat="server" DataTextField="HeDescription"

                    DataValueField="HeTId">

                </asp:DropDownList>

后台代码:

 

    private void Bind()

    {

        HelpFristTypeBLL fristbll = new HelpFristTypeBLL();

        this.ddlFrist.DataSource = fristbll.GetList();

        this.ddlFrist.DataBind();

        ListItem listFrist = new ListItem("请选择", "-1");

        ddlFrist.Items.Insert(0, listFrist);

        this.ddlFrist.Attributes.Add("onchange", "XmlPost2(this);");

    }

GetSecond.ashx

 

<%@ WebHandler Language="C#" Class="GetSecond" %>

 

using System;

using System.Web;

using HouseBLL;

using HouseModels;

using HouseTool;

using System.Data;

using System.Data.SqlClient;

public class GetSecond : IHttpHandler

{

 

    public void ProcessRequest(HttpContext context)

    {

        context.Response.ContentType = "text/plain";

        string id = context.Request.QueryString["secondId"].ToString();

        string mystr = "";

        string sql = "select HeTId,HeDescription from HelpSecondType where heid= '" + id + "'";

        SQLDBTool hah = new SQLDBTool();

        DataSet ds = hah.DS_Query(sql);

        if (ds.Tables[0].Rows.Count != 0)

        {

            for (int i = 0; i < ds.Tables[0].Rows.Count; i++)

            {

                mystr += "," + ds.Tables[0].Rows[i][0].ToString() + "|" + ds.Tables[0].Rows[i][1].ToString();

            }

            mystr = mystr.Substring(1);

        }

        context.Response.Write(mystr);

    }

    public bool IsReusable

    {

        get

        {

            return false;

        }

    }

 

}

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值