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

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. }
            原文链接：https://www.f2er.com/ajax/166277.html

            猜你在找的Ajax相关文章

            网页的异步请求（Ajax）
            JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
            手动实现AJAX
            AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
            axios异步提交表单数据的不同形式
            踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
            php的ajax简单实例
            很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
            Json与Ajax(注册实例）
            需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
            jSon和Ajax登录功能，ajax数据交互案例
            ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
            关于AjaxControlToolkit的样式问题
            网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
            一个简单的AJAX实现(HELLO AJAX)
            客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
            AJAX中文乱码的两类问题及解决之策
            1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
            实例：AJAX返回xml代码如何在网页中显示
            建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
            HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
            关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作