微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

Ajax 实现省市县 三级联动【无刷新】三层 | 三级联动—有刷新

分类：Ajax作者：编程之家

sql建表


HTML——HTMLPage1.htm

[html] view plain copy
  1. <htmlxmlns="http://www.w3.org/1999/xhtml">
  2. head>
  3. title>Ajax实现省市县三级联动【无刷新】三层</styletype="text/css" select
  4. {
  5. width:130px;
  6. }
  7. stylescriptsrc="js/Jquery1.7.js"type="text/javascript">scriptscripttype="text/javascript" $(function(){
  8. $.ajax({
  9. type:"post",
  10. contentType:"application/json",
  11. url:"WebService1.asmx/GetProvince",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px"> data:"{}",248); line-height:18px"> success:function(result){
  12. varstroption='';
  13. for(vari=0;i<result.d.length;i++){
  14. stroption+='optionvalue='+result.d[i].provinceID+'>';
  15. stroption+=result.d[i].provincename;
  16. option $('#seprovince').append(stroption);
  17. })
  19. $('#seprovince').change(function(){
  20. $('#secityoption:gt(0)').remove();
  21. $('#seareaoption:gt(0)').remove();
  23. $.ajax({
  24. type:"post",248); line-height:18px"> contentType:"application/json",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px"> url:"WebService1.asmx/GetCItyByPro",248); line-height:18px"> data:"{proid:'"+$(this).val()+"'}",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px"> success:function(result){
  25. varstrocity='';
  26. for(vari=0;iresult.d.length;i++){
  27. strocity+='optionvalue='+result.d[i].cityID+'>';
  28. strocity+=result.d[i].cityname;
  29. }
  30. $('#secity').append(strocity);
  31. })
  32. $('#secity').change(function(){
  33. url:"WebService1.asmx/GetAreaByCity",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px"> data:"{cityid:'"+$(this).val()+"'}",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px"> varstroarea='';
  34. stroarea+='optionvalue='+result.d[i].areaID+' stroarea+=result.d[i].areaname;
  35. $('#searea').append(stroarea);
  36. bodytabletrtd 用户名
  37. inputid="Text1"type="text"/>
  38. 密码
  39. inputid="Text2"type="text" 确认密码
  40. inputid="Text3"type="text" 邮箱
  41. inputid="Text4"type="text" 地址
  42. selectid="seprovince">--请选择--select 省
  43. selectid="secity">市
  44. selectid="searea">县
  45. html>

创建Web服务——WebService1.asmx

copy

    usingSystem;
  1. usingSystem.Collections.Generic;
  2. usingSystem.Linq;
  3. usingSystem.Web;
  4. usingSystem.Web.Services;
  5. usingSystem.Data;
  6. namespaceWebApplication1
  7. {
  8. ///summary ///WebService1的摘要说明
  9. [WebService(Namespace="http://tempuri.org/")]
  10. [WebServiceBinding(ConformsTo=WsiProfiles.BasicProfile1_1)]
  11. [System.ComponentModel.ToolBoxItem(false)]
  12. //若要允许使用ASP.NETAJAX从脚本中调用此Web服务，请取消对下行的注释。
  13. [System.Web.Script.Services.ScriptService]
  14. publicclassWebService1:System.Web.Services.WebService
  15. [WebMethod]
  16. publicstringHelloWorld()
  17. return"HelloWorld";
  18. [WebMethod]
  19. publicListModel.province>GetProvince()
  20. BLL.provincebpro=newBLL.province();
  21. List>list=bpro.GetListModel();
  22. returnlist;
  23. publicListModel.city>GetCItyByPro(stringproid)
  24. BLL.citybcity=newBLL.city();
  25. List>list=bcity.GetListModel("father='"+proid+"'");
  26. returnlist;
  27. Model.area>GetAreaByCity(stringcityid)
  28. BLL.areabarea=newBLL.area();
  29. >list=barea.GetListModel("father='"+cityid+"'");
  30. }

====三层 ——> 创建类库 BLL 、DAL、DataAccess、MODEL——> 在类库里添加类

province表——动软生成类

GetListModel在BLL层定义

GetListModel转到定义——DAL层

city表——动软生成类

city在BLL层定义

copy

    publicList>GetListModel(stringstrsql)
  1. returndal.GetListModel(strsql);
  2. }


city转到定义——DAL层
copy
    publicSystem.Collections.Generic.List System.Collections.Generic.List>list=newSystem.Collections.Generic.List>();
  1. DataTabledt=GetList(strsql).Tables[0];
  2. foreach(DaTarowrowindt.Rows)
  3. Model.citymcity=newModel.city();
  4. mcity.id=Convert.ToInt32(row["id"]);
  5. mcity.cityID=row["cityID"].ToString();
  6. mcity.cityname=row["cityname"].ToString();
  7. list.Add(mcity);
  8. area表——动软生成类

    area在BLL层定义

    copy
      area转到定义——DAL层
      copy
        DataTabledt=GetList(strsql).Tables[0];
      1. System.Collections.Generic.List>();
      2. Model.areamarea=newModel.area()
      3. id=Convert.ToInt32(row["id"]),
      4. areaID=row["areaID"].ToString(),
      5. areaname=row["areaname"].ToString()
      6. };
      7. list.Add(marea);
      8. =========================================================三级联动—有刷新【两种实现方法】

        第一种：

        sql建表

        三层 ——> 创建类库 BLL 、DAL、DataAccess、MODEL——> 在类库里添加类

        Web窗体——WebForm1.aspx

        前台：

        copy

          headrunat="server">三级联动—有刷新formid="form1"runat="server"div>地址asp:DropDownListID="ddlprovince"runat="server"AutopostBack="True"
        1. onselectedindexchanged="ddlprovince_SelectedindexChanged"asp:DropDownList>省
        2. asp:DropDownListID="ddlcity"runat="server"AutopostBack="True"
        3. onselectedindexchanged="ddlcity_SelectedindexChanged"asp:DropDownListID="ddlarear"runat="server">县
        4. form后台：——引用了动软生成的类库

          copy

            usingSystem.Web.UI;
          1. usingSystem.Web.UI.WebControls;
          2. usingSystem.Data;
          3. namespaceWebApplication1
          4. publicpartialclassWebForm1:System.Web.UI.Page
          5. protectedvoidPage_Load(objectsender,EventArgse)
          6. if(!IsPostBack)
          7. LoadProvince();
          8. Model.provincep=newModel.province();
          9. p.id=1;
          10. p.provinceID="111111";
          11. p.provincename="北京";
          12. Model.provincep1=newModel.province();
          13. p1.id=2;
          14. p1.provinceID="222222";
          15. p1.provincename="天津";
          16. privatevoidLoadProvince()
          17. BLL.provincebpro=newBLL.province();
          18. DataTabledt=bpro.GetList("").Tables[0];
          19. ddlprovince.DataSource=dt;
          20. ddlprovince.DataTextField="provincename";
          21. ddlprovince.DataValueField="provinceID";
          22. ddlprovince.DataBind();
          23. protectedvoidddlprovince_SelectedindexChanged(objectsender,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px"> if(this.ddlarear.Items.Count>0)
          24. this.ddlarear.Items.Clear();
          25. BLL.citybcity=newBLL.city();
          26. stringproid=this.ddlprovince.SelectedItem.Value;
          27. DataTabledt=bcity.GetList("father='"+proid+"'").Tables[0];
          28. ddlcity.DataSource=dt;
          29. ddlcity.DataTextField="cityname";
          30. ddlcity.DataValueField="cityID";
          31. ddlcity.DataBind();
          32. //绑定默认显示的市级区划下面所有的县
          33. stringcityid=dt.Rows[0]["cityID"].ToString();
          34. BLL.areabaraer=newBLL.area();
          35. DataTabledtarea=baraer.GetList("father='"+cityid+"'").Tables[0];
          36. ddlarear.DataSource=dtarea;
          37. ddlarear.DataTextField="areaname";
          38. ddlarear.DataValueField="areaID";
          39. ddlarear.DataBind();
          40. protectedvoidddlcity_SelectedindexChanged(objectsender,EventArgse)
          41. BLL.areabaraer=newBLL.area();
          42. stringcityid=this.ddlcity.SelectedItem.Value;
          43. DataTabledt=baraer.GetList("father='"+cityid+"'").Tables[0];
          44. ddlarear.DataSource=dt;
          45. }

          Web窗体——WebForm2.aspx

          前台：

          copy
            asp:DropDownListID="ddlarear"runat="server"
          1. 后台：

            copy

              publicpartialclassWebForm2:System.Web.UI.Page
            1. protectedvoidPage_Load(objectsender,248); line-height:18px"> if(!IsPostBack)
            2. LoadProvince();
            3. BLL.provincebprovince=newBLL.province();
            4. >list=bprovince.GetListModel();
            5. this.ddlprovince.DataSource=list;
            6. this.ddlprovince.DataTextField="provincename";
            7. this.ddlprovince.DataValueField="provinceID";
            8. this.ddlprovince.DataBind();
            9. protectedvoidddlprovince_SelectedindexChanged(objectsender,248); line-height:18px"> stringid=this.ddlprovince.SelectedItem.Value;
            10. >list=bcity.GetListModel("father="
            11. +id);
            12. this.ddlcity.DataSource=list;
            13. this.ddlcity.DataTextField="cityname";
            14. this.ddlcity.DataValueField="cityID";
            15. this.ddlcity.DataBind();
            16. protectedvoidddlcity_SelectedindexChanged(objectsender,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px"> stringid=this.ddlcity.SelectedItem.Value;
            17. BLL.areabarear=newBLL.area();
            18. >list=barear.GetListModel("father="
            19. +id);
            20. this.ddlarear.DataSource=list;
            21. this.ddlarear.DataTextField="areaname";
            22. this.ddlarear.DataValueField="areaID";
            23. this.ddlarear.DataBind();
            24. }

            版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

            相关推荐

            ajax 上传文件项目下载
            IE6是一个非常老旧的网页浏览器，虽然现在很少人再使用它，但是在某些特殊情况下，我们可能还需要使用IE6来访问网页。而在IE6中，我们通常会使用JavaScript来提交表单，来看一下具体操作。
            ajax .post()
            PHP中的count()函数是用来计算数组或容器中元素的个数。这个函数十分方便，在编写代码时使用频率也非常高。无论你是要统计数组的长度、统计字符串中字符出现的次数还是统计对象中属性的个数，count()都可以帮助你轻松
            ajax 不返回值 写法
            使用 AJAX（Asynchronous JavaScript and XML）技术可以在不刷新整个页面的情况下，向服务器发送请求并接收响应。通常来说，我们使用 AJAX 请求是为了获取后台数据，并将其展示在前端页面上。然而，有时候我们只需要
            ajax 下载文件 blob
            Ajax（Asynchronous JavaScript and XML）是一种用于改进网页用户体验的技术，通过与服务器进行异步通信，实现在网页上局部刷新数据而不必整个页面刷新的功能。在实际开发中，我们经常需要从服务器端下载文件，而传统
            ajax 下载excel文件流
            本文将介绍如何通过AJAX下载Excel文件流。通过AJAX，我们可以在不刷新整个页面的情况下，向服务器发送请求并获取响应数据。在某些场景下，我们需要通过AJAX下载Excel文件流，以便于在前端使用或保存到本地。本文将详
            ajax .get .post
            Ajax是一种用于客户端和服务器之间的异步通信技术。通过Ajax，我们可以在不刷新整个页面的情况下向服务器发送请求并获得响应数据。而在Ajax的基础上，.get和.post是两种常用的请求方法，它们分别用于发送GET和POST请
            ajax 上传 excel
            AJAX（Asynchronous JavaScript and XML）是一种在网页上实现异步数据传输的技术。通过AJAX，网页可以在不刷新整个页面的情况下与服务器进行数据交互，提升用户体验和页面性能。在实际应用中，AJAX广泛用于表单提交、
            ajax 下拉 360取不到值
            在使用Ajax下拉加载数据的过程中，有时候会出现无法取到360度的问题。这个问题可能是由于代码逻辑的问题导致的，也有可能是网络延迟引起的。为了解决这个问题，我们需要对代码进行仔细排查，并且在合适的地方添加适当
            ajax 与 .post 区别
            本文将介绍Ajax和.post之间的区别。Ajax是一种用于在网页上进行异步通信的技术，能够在不刷新整个页面的情况下更新部分页面内容。.post是jQuery中的一个方法，用于向服务器发送POST请求。虽然它们都可以用于发送异步
            ajax 上传文件 目录权限
            AJAX（Asynchronous JavaScript and XML）是一种在Web页面上进行异步数据请求和交互的技术。它的出现使得页面在后台与服务器进行数据交互的同时，不需要重新加载整个页面。在网页开发中，常常需要实现文件上传功能，
            苹果市值2025年有望达4万亿美元
            pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot