XmlHttp实现无刷新三联动ListBox

最新推荐文章于 2021-06-26 05:04:58 发布
最新推荐文章于 2021-06-26 05:04:58 发布 · 134 阅读 · 0
文章标签：

#SQL #UI #Go #Web #脚本

本文介绍了一种使用XmlHttp实现的无刷新三级联动ListBox控件的技术方案。通过客户端JavaScript与服务器端C#的配合，实现了在不刷新页面的情况下动态加载下拉列表的内容。该方案适用于需要展示分层数据的Web应用。
1.html

<HTML>
    <HEAD>
        <title>XmlHttp实现无刷新三联动ListBox</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 LANGUAGE="JavaScript">
            <!--
                //以XML求取ListBox2的数据
                function XmlPost2(obj)
                {
　　                var svalue = obj.value;
　　                var webFileUrl = "?povinceid=" + svalue;
　　                var result = "";
　　                var xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
　　                xmlHttp.open("POST", webFileUrl, false);
　　                xmlHttp.send("");
　　                result = xmlHttp.responseText;
                　　
　　                if(result != "")
　　                {
　　　　                document.all("ListBox2").length=0;
　　　　                var piArray = result.split(",");
　　　　                for(var i=0;i<piArray.length;i++)
　　　　                {
　　　　　　                var ary1 = piArray[i].toString().split("|");
　　　　　　                document.all("ListBox2").options.add(new Option(ary1[1].toString(),ary1[0].toString()));
　　　　                }
　　                }
　　                else
　　                {
　　　　                alert(result);
　　                }
                }
                //以XML求取ListBox3的数据
                function XmlPost3(obj)
                {
　　                var svalue = obj.value;
　　                var webFileUrl = "?cityid=" + svalue;
　　                var result = "";
　　                var xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
　　                xmlHttp.open("POST", webFileUrl, false);
　　                xmlHttp.send("");
　　                result = xmlHttp.responseText;
                　　
　　                if(result != "")
　　                {
　　　　                document.all("ListBox3").length=0;
　　　　                var piArray = result.split(",");
　　　　                for(var i=0;i<piArray.length;i++)
　　　　                {
　　　　　　                var ary1 = piArray[i].toString().split("|");
　　　　　　                document.all("ListBox3").options.add(new Option(ary1[1].toString(),ary1[0].toString()));
　　　　                }
　　                }
　　                else
　　                {
　　　　                alert(result);
　　                }
                }                
            //-->
        </SCRIPT>
    </HEAD>
    <body MS_POSITIONING="GridLayout">
        <form id="Form1" method="post" runat="server">
            <asp:ListBox id="ListBox1" style="Z-INDEX: 101; LEFT: 24px; POSITION: absolute; TOP: 16px" runat="server"
                Height="448px" Width="200px"></asp:ListBox>
            <asp:ListBox id="ListBox2" style="Z-INDEX: 102; LEFT: 352px; POSITION: absolute; TOP: 24px" runat="server"
                Height="432px" Width="168px"></asp:ListBox>
            <asp:ListBox id="ListBox3" style="Z-INDEX: 103; LEFT: 568px; POSITION: absolute; TOP: 24px" runat="server"
                Height="424px" Width="200px"></asp:ListBox>
        </form>
    </body>
</HTML>


2.cs代码

public class WebForm2 : System.Web.UI.Page
    {
        protected System.Web.UI.WebControls.ListBox ListBox1;
        protected System.Web.UI.WebControls.ListBox ListBox2;
        protected System.Web.UI.WebControls.ListBox ListBox3;

        public static string ConnectionString=System.Configuration .ConfigurationSettings .AppSettings["ConnectionString"];

        GetDataSet#region GetDataSet
        public static DataSet GetDataSet(string sql)
        {
            SqlDataAdapter    sda =new SqlDataAdapter(sql,ConnectionString);
            DataSet ds=new DataSet();
            sda.Fill(ds);
            return ds;
        }
        #endregion

        property#region property
        private string povinceid
        {
            get
            {
                if(ViewState["povinceid"]!=null && ViewState["povinceid"].ToString()!="")
                {
                    return ViewState["povinceid"].ToString();
                }
                else
                {
                    if(Request["povinceid"]!=null && Request["povinceid"].ToString()!="")
                    {
                        return Request["povinceid"];
                    }
                    else
                    {
                        return "";
                    }
                }
            }
            set
            {
                ViewState["povinceid"]=value;
            }
        }
        private string cityid
        {
            get
            {
                if(ViewState["cityid"]!=null && ViewState["cityid"].ToString()!="")
                {
                    return ViewState["cityid"].ToString();
                }
                else
                {
                    if(Request["cityid"]!=null && Request["cityid"].ToString()!="")
                    {
                        return Request["cityid"];
                    }
                    else
                    {
                        return "";
                    }
                }
            }
            set
            {
                ViewState["povinceid"]=value;
            }
        }
        #endregion

        Page_Load#region Page_Load
        private void Page_Load(object sender, System.EventArgs e)
        {
            if(!this.IsPostBack)
　　        {
　　　　        this.down1_bind();
                this.ListBox1.Attributes.Add("onchange","XmlPost2(this);");
                this.ListBox2.Attributes.Add("onchange","XmlPost3(this);");
　　        }
　　        if(povinceid != "")
　　        {
　　　　        this.down2_bind(povinceid);
　　        }
            if(cityid != "")
　　        {
　　　　        this.down3_bind(cityid);
　　        }
        }

        #endregion

        down2_bind#region down2_bind
        private void down2_bind(string id)
        {
　　        string mystr = "";
　　        string sql = "select cityID,city from city where father = '" + id + "'";
　　        DataSet ds = GetDataSet(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);
　　        }
　　        this.Response.Write(mystr);
　　        this.Response.End();
        }
        #endregion

        down3_bind#region down3_bind
        private void down3_bind(string id)
        {
　　        string mystr = "";
　　        string sql = "select areaID,area from area where father = '" + id + "'";
　　        DataSet ds = GetDataSet(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);
　　        }
　　        this.Response.Write(mystr);
　　        this.Response.End();
        }

        #endregion

        down1_bind#region down1_bind
        private void down1_bind()
        {
　　        string sql = "select provinceID,province from povince";
　　        DataSet ds = GetDataSet(sql);
　　        this.ListBox1.DataSource = ds;
　　        this.ListBox1.DataValueField = "provinceID";
　　        this.ListBox1.DataTextField = "province";
　　        this.ListBox1.DataBind();　　        
        }

        #endregion

        Web Form Designer generated code#region Web Form Designer generated code
        override protected void OnInit(EventArgs e)
        {
            //
            // CODEGEN: This call is required by the ASP.NET Web Form Designer.
            //
            InitializeComponent();
            base.OnInit(e);
        }

        /**//// <summary>
        /// Required method for Designer support - do not modify
        /// the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {    
            this.Load += new System.EventHandler(this.Page_Load);

        }
        #endregion
    }

3.数据库下载http://dl.iteye.com/topics/download/c829bf89-42cf-355d-95bb-a4af8a0f8ee5
4.数据库脚本(3,4随便一个就可以)

if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[area]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
drop table [dbo].[area]
GO

if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[city]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
drop table [dbo].[city]
GO

if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[povince]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
drop table [dbo].[povince]
GO

CREATE TABLE [dbo].[area] (
    [id] [int] NOT NULL ,
    [areaID] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
    [area] [nvarchar] (60) COLLATE Chinese_PRC_CI_AS NULL ,
    [father] [nvarchar] (6) COLLATE Chinese_PRC_CI_AS NULL 
) ON [PRIMARY]
GO

CREATE TABLE [dbo].[city] (
    [id] [int] NOT NULL ,
    [cityID] [nvarchar] (6) COLLATE Chinese_PRC_CI_AS NULL ,
    [city] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
    [father] [nvarchar] (6) COLLATE Chinese_PRC_CI_AS NULL 
) ON [PRIMARY]
GO

CREATE TABLE [dbo].[povince] (
    [id] [int] NOT NULL ,
    [provinceID] [nvarchar] (6) COLLATE Chinese_PRC_CI_AS NULL ,
    [province] [nvarchar] (40) COLLATE Chinese_PRC_CI_AS NULL 
) ON [PRIMARY]
GO
自定义ListBox控件3
qq_41617901的博客
07-17 261
<ListBox ItemsSource="{Binding ListTodo}" BorderThickness="0" Margin="25 0 0 0"> <ListBox.ItemsPanel> <ItemsPanelTemplate> <UniformGrid Columns="4" > .
三级联动ListBox无刷新读取XML文档
12-18
XmlHttp实现无刷新三联动ListBox 三级ListBox分别描述一级资源名，二级资源名和三级资源名。 如，当第一级选影视综艺时，第二就显示影视综艺的所有子类名，如电影，连续剧等。当再选电影时，第三级就显示出所有电影...
ListBox控件显示分类如何实现三级联动
无笺札记
12-29 3146
写asp.net程序的时候，用ListBox控件实现数据库中分类的三级显示，而且要实现选择第一级的时候，后面的两级（多级也可以）实现联动。ListBox分别为ListBox1、ListBox2、ListBox3如果只是简单的设置这三个ListBox的SelectedIndexChanged事件的处理程序，那么只能实现相邻的两级之间的联动。为了实现三级联动，需要使用一下方法：首先配置三个数据源控件：
[VB.NET]我要在listbox中显示三列该怎么做？
VB.NET学习网-VB.NET实例、VB.NET教程、VB.NET源码下载
12-28 1581
<!--google_ad_client = "pub-8333940862668978";/* 728x90, 创建于 08-11-30 */google_ad_slot = "4485230109";google_ad_width = 728;google_ad_height = 90;//--><script type="text/javascript"
Tkinter-ListBox基本使用
热门推荐
来瞧一瞧,看一看咯.
01-07 1万+
Tkinter-ListBox基本使用1:创建from tkinter import *root = Tk() listbox = Listbox(root) listbox.insert(END,'ListBox1') listbox.insert(END,'ListBox2') listbox.insert(END,'ListBox3')listbox.pack()root.mainloop()
XmlHttp实现无刷新三联动下拉框
zgh2002007的专栏
11-30 437
 
asp自动更新html数据,asp+xmlhttp实现页面无刷新数据动态显示
weixin_28703507的博客
06-26 779
xmlhttp是非常好的一个组件，我们一般用它来做小偷程序，可以实现无数据库抓取对方内容显示，还可以用于生成HTML静态页面，还可以在HTML静态页面上实现动态内容显示。用xmlhttp组件，通过get或post方式请求远程页面数据，实现无需刷新页面更新数据动态显示。测试文件有两个，一个名为list.asp(请求页)，另一个为msg.asp(内容页)。list.asp内容如下：functionG...
Ajax实现无刷新三联动下拉框
02-24 477
 Ajax实现无刷新三联动下拉框     http://singlepine.cnblogs.com/articles/257954.html         XmlHttp实现无刷新三联动下拉框       http://singlepine.cnblogs.com/articles/265678.html         JavaScript调用Web   Services实现无刷新三联动  
实现无刷新三联动下拉框的技术探索
在实现无刷新三联动下拉框的场景中，技术核心是使用XmlHttp对象（或现代的XMLHttpRequest或Fetch API等），这些技术允许我们从客户端向服务器端异步请求数据，然后在不重新加载整个页面的情况下更新网页上的部分内容...
html分组多选单选下拉框.rar
12-31
html分组多选单选下拉框
实现动态三级联动ListBox的无刷新技术
### 知识点 #### 1. 无刷新页面更新技术XmlHttp ...以上知识点构成了实现“无刷新三级联动ListBox”的核心原理与实现细节，涵盖了从数据库操作、后端数据处理、前端逻辑编写到用户体验优化的各个方面。
实现三级联动ListBox与XML无刷新交互技术
本文件描述了一个具体的Web开发实践——如何通过XmlHttp实现无刷新的三级联动ListBox。该技术涉及异步请求处理、XML数据格式的使用、文件路径编码问题的处理以及数据库的数据读取和展示。这是一个非常典型的前后端...
实现XMLHTTP技术的无刷新页面数据自动更新
使用XMLHTTP实现无刷新自动实时更新数据的应用场景非常广泛，比如天气预报网站、股票行情、聊天应用、在线游戏等实时性要求较高的应用。它的优势在于可以减少服务器和网络的负载，因为只有必要更新的数据被传输和...
lenz0a89.gsd Lenze E84AYCPM gsd
12-05
lenz0a89.gsd Lenze E84AYCPM gsd
【大厂+2025】500+真题考点合规备考双通！.zip
12-05
【大厂+2025】500+真题考点合规备考双通！.zip
【微服务架构】基于Spring Cloud Alibaba的秒杀系统设计：高并发场景下库存超卖与分布式事务解决方案
12-05
内容概要：本文详细介绍了“秒杀商城”微服务架构的设计与实战全过程，涵盖系统从需求分析、服务拆分、技术选型到核心功能开发、分布式事务处理、容器化部署及监控链路追踪的完整流程。重点解决了高并发场景下的超卖问题，采用Redis预减库存、消息队列削峰、数据库乐观锁等手段保障数据一致性，并通过Nacos实现服务注册发现与配置管理，利用Seata处理跨服务分布式事务，结合RabbitMQ实现异步下单，提升系统吞吐能力。同时，项目支持Docker Compose快速部署和Kubernetes生产级编排，集成Sleuth+Zipkin链路追踪与Prometheus+Grafana监控体系，构建可观测性强的微服务系统。; 适合人群：具备Java基础和Spring Boot开发经验，熟悉微服务基本概念的中高级研发人员，尤其是希望深入理解高并发系统设计、分布式事务、服务治理等核心技术的开发者；适合工作2-5年、有志于转型微服务或提升架构能力的工程师； 使用场景及目标：①学习如何基于Spring Cloud Alibaba构建完整的微服务项目；②掌握秒杀场景下高并发、超卖控制、异步化、削峰填谷等关键技术方案；③实践分布式事务（Seata）、服务熔断降级、链路追踪、统一配置中心等企业级中间件的应用；④完成从本地开发到容器化部署的全流程落地； 阅读建议：建议按照文档提供的七个阶段循序渐进地动手实践，重点关注秒杀流程设计、服务间通信机制、分布式事务实现和系统性能优化部分，结合代码调试与监控工具深入理解各组件协作原理，真正掌握高并发微服务系统的构建能力。
MATLAB基于3D FDTD的微带线馈矩形天线分析[用于模拟超宽带脉冲通过线馈矩形天线的传播，以计算微带结构的回波损耗参数]
最新发布
12-05
MATLAB基于3D FDTD的微带线馈矩形天线分析[用于模拟超宽带脉冲通过线馈矩形天线的传播，以计算微带结构的回波损耗参数]内容概要：本文介绍了基于3D FDTD（时域有限差分）方法在MATLAB平台上对微带线馈电的矩形天线进行分析的技术方案，旨在模拟超宽带脉冲通过该天线结构的传播过程，并重点计算微带结构的回波损耗参数。该方法通过数值仿真手段精确建模电磁波在天线中的传播特性，适用于高频电磁场仿真与天线性能评估，能够有效支持天线设计优化。文中可能涵盖FDTD算法的基本原理、网格划分、边界条件设置、激励源配置及结果后处理等关键环节。; 适合人群：具备电磁场与微波技术基础知识，熟悉MATLAB编程，从事天线设计、射频工程或相关领域研究的研究生、科研人员及工程技术人员。; 使用场景及目标：①开展超宽带天线的设计与性能仿真；②研究微带天线在脉冲激励下的瞬态响应特性；③计算和优化天线的回波损耗（S11参数），提升匹配性能；④教学与科研中用于电磁仿真方法的实践训练。; 阅读建议：建议读者结合FDTD理论基础与MATLAB编程实践，逐步实现仿真流程，重点关注时间步长、空间网格精度和边界条件对仿真结果的影响，并通过对比仿真与实测数据验证模型准确性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值