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

最新推荐文章于 2022-11-23 08:09:30 发布
最新推荐文章于 2022-11-23 08:09:30 发布
阅读量1k 收藏
点赞数

SQL建表



HTML——HTMLPage1.htm

[html]  view plain copy
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head>  
  3.     <title>Ajax 实现省市县 三级联动【无刷新】三层</title>  
  4.     <style type="text/css">  
  5.         select  
  6.         {  
  7.             width: 130px;  
  8.         }  
  9.     </style>  
  10.     <script src="js/Jquery1.7.js" type="text/javascript"></script>  
  11.     <script type="text/javascript">  
  12.         $(function () {  
  13.             $.ajax({  
  14.                 type: "post",  
  15.                 contentType: "application/json",  
  16.                 url: "WebService1.asmx/GetProvince",  
  17.                 data: "{}",  
  18.                 success: function (result) {  
  19.                     var stroption = '';  
  20.                     for (var i = 0; i < result.d.length; i++) {  
  21.                         stroption += '<option value=' + result.d[i].provinceID + '>';  
  22.                         stroption += result.d[i].provincename;  
  23.                         stroption += '</option>';  
  24.                     }  
  25.                     $('#seprovince').append(stroption);  
  26.                 }  
  27.             })  
  28.   
  29.             $('#seprovince').change(function () {  
  30.   
  31.                 $('#secity option:gt(0)').remove();  
  32.                 $('#searea option:gt(0)').remove();  
  33.   
  34.                 $.ajax({  
  35.                     type: "post",  
  36.                     contentType: "application/json",  
  37.                     url: "WebService1.asmx/GetCItyByPro",  
  38.                     data: "{proid:'" + $(this).val() + "'}",  
  39.                     success: function (result) {  
  40.                         var strocity = '';  
  41.                         for (var i = 0; i < result.d.length; i++) {  
  42.                             strocity += '<option value=' + result.d[i].cityID + '>';  
  43.                             strocity += result.d[i].cityname;  
  44.                             strocity += '</option>';  
  45.                         }  
  46.                         $('#secity').append(strocity);  
  47.                     }  
  48.                 })  
  49.             })  
  50.   
  51.             $('#secity').change(function () {  
  52.                 $('#searea option:gt(0)').remove();  
  53.                 $.ajax({  
  54.                     type: "post",  
  55.                     contentType: "application/json",  
  56.                     url: "WebService1.asmx/GetAreaByCity",  
  57.                     data: "{cityid:'" + $(this).val() + "'}",  
  58.                     success: function (result) {  
  59.                         var stroarea = '';  
  60.                         for (var i = 0; i < result.d.length; i++) {  
  61.                             stroarea += '<option value=' + result.d[i].areaID + '>';  
  62.                             stroarea += result.d[i].areaname;  
  63.                             stroarea += '</option>';  
  64.                         }  
  65.                         $('#searea').append(stroarea);  
  66.                     }  
  67.                 })  
  68.             })  
  69.         })  
  70.     </script>  
  71. </head>  
  72. <body>  
  73.     <table>  
  74.         <tr>  
  75.             <td>  
  76.                 用户名  
  77.             </td>  
  78.             <td>  
  79.                 <input id="Text1" type="text" />  
  80.             </td>  
  81.         </tr>  
  82.         <tr>  
  83.             <td>  
  84.                 密码  
  85.             </td>  
  86.             <td>  
  87.                 <input id="Text2" type="text" />  
  88.             </td>  
  89.         </tr>  
  90.         <tr>  
  91.             <td>  
  92.                 确认密码  
  93.             </td>  
  94.             <td>  
  95.                 <input id="Text3" type="text" />  
  96.             </td>  
  97.         </tr>  
  98.         <tr>  
  99.             <td>  
  100.                 邮箱  
  101.             </td>  
  102.             <td>  
  103.                 <input id="Text4" type="text" />  
  104.             </td>  
  105.         </tr>  
  106.         <tr>  
  107.             <td>  
  108.                 地址  
  109.             </td>  
  110.             <td>  
  111.                 <select id="seprovince">  
  112.                     <option>--请选择--</option>  
  113.                 </select>  
  114.                 省  
  115.                 <select id="secity">  
  116.                     <option>--请选择--</option>  
  117.                 </select>市  
  118.                 <select id="searea">  
  119.                     <option>--请选择--</option>  
  120.                 </select>县  
  121.             </td>  
  122.         </tr>  
  123.     </table>  
  124. </body>  
  125. </html>  

创建Web服务——WebService1.asmx

[html]  view plain copy
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Services;  
  6. using System.Data;  
  7.   
  8. namespace WebApplication1  
  9. {  
  10.     /// <summary>  
  11.     /// WebService1 的摘要说明  
  12.     /// </summary>  
  13.     [WebService(Namespace = "http://tempuri.org/")]  
  14.     [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]  
  15.     [System.ComponentModel.ToolboxItem(false)]  
  16.     // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。  
  17.      [System.Web.Script.Services.ScriptService]  
  18.     public class WebService1 : System.Web.Services.WebService  
  19.     {  
  20.   
  21.         [WebMethod]  
  22.         public string HelloWorld()  
  23.         {  
  24.             return "Hello World";  
  25.         }  
  26.         [WebMethod]  
  27.         public List<Model.province> GetProvince()  
  28.         {  
  29.             BLL.province bpro = new BLL.province();  
  30.             List<Model.province> list= bpro.GetListModel();  
  31.             return list;  
  32.         }  
  33.         [WebMethod]  
  34.         public List<Model.city> GetCItyByPro(string proid)  
  35.         {  
  36.             BLL.city bcity = new BLL.city();  
  37.             List<Model.city> list = bcity.GetListModel("father='"+proid+"'");  
  38.             return list;  
  39.         }  
  40.         [WebMethod]  
  41.         public List<Model.area> GetAreaByCity(string cityid)  
  42.         {  
  43.             BLL.area barea = new BLL.area();  
  44.             List<Model.area> list= barea.GetListModel("father='"+cityid+"'");  
  45.             return list;  
  46.         }  
  47.     }  
  48. }  

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

province表——动软生成类 

GetListModel在BLL层定义

GetListModel转到定义——DAL层

city表——动软生成类 

city在BLL层定义

[html]  view plain copy
  1. public List<Model.city> GetListModel(string strsql)  
  2.         {  
  3.             return dal.GetListModel(strsql);  
  4.         }  


city转到定义——DAL层
 
[html]  view plain copy
  1. public System.Collections.Generic.List<Model.city> GetListModel(string strsql)  
  2.         {  
  3.             System.Collections.Generic.List<Model.city> list = new System.Collections.Generic.List<Model.city>();  
  4.             DataTable dt = GetList(strsql).Tables[0];  
  5.             foreach (DataRow row in dt.Rows)  
  6.             {  
  7.                 Model.city mcity = new Model.city();  
  8.                 mcity.id = Convert.ToInt32(row["id"]);  
  9.                 mcity.cityID = row["cityID"].ToString();  
  10.                 mcity.cityname = row["cityname"].ToString();  
  11.                 list.Add(mcity);  
  12.             }  
  13.             return list;  
  14.         }  

area表——动软生成类 

area在BLL层定义

[html]  view plain copy
  1. public List<Model.area> GetListModel(string strsql)  
  2.         {  
  3.             return dal.GetListModel(strsql);  
  4.         }  


area转到定义——DAL层

[html]  view plain copy
  1. public System.Collections.Generic.List<Model.area> GetListModel(string strsql)  
  2.        {  
  3.            DataTable dt= GetList(strsql).Tables[0];  
  4.            System.Collections.Generic.List<Model.area> list = new System.Collections.Generic.List<Model.area>();  
  5.            foreach (DataRow row in dt.Rows)  
  6.            {  
  7.                Model.area marea = new Model.area()  
  8.                {  
  9.                    id = Convert.ToInt32(row["id"]),  
  10.                    areaID = row["areaID"].ToString(),  
  11.                    areaname = row["areaname"].ToString()  
  12.                };  
  13.                list.Add(marea);  
  14.            }  
  15.            return list;  
  16.        }  

=========================================================三级联动—有刷新【两种实现方法】

第一种：


SQL建表

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

Web窗体——WebForm1.aspx

前台：

[html]  view plain copy
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head runat="server">  
  3.     <title>三级联动—有刷新</title>  
  4.     <style type="text/css">  
  5.         select  
  6.         {  
  7.             width: 130px;  
  8.         }  
  9.     </style>  
  10. </head>  
  11. <body>  
  12.     <form id="form1" runat="server">  
  13.     <div>  
  14.     <table>  
  15.         <tr><td>地址</td><td>  
  16.             <asp:DropDownList ID="ddlprovince" runat="server" AutoPostBack="True"   
  17.                 onselectedindexchanged="ddlprovince_SelectedIndexChanged">  
  18.             </asp:DropDownList>省  
  19.             <asp:DropDownList ID="ddlcity" runat="server" AutoPostBack="True"   
  20.                 onselectedindexchanged="ddlcity_SelectedIndexChanged">  
  21.             </asp:DropDownList>市  
  22.             <asp:DropDownList ID="ddlarear" runat="server">  
  23.             </asp:DropDownList>县  
  24.         </td></tr></table>  
  25.     </div>  
  26.     </form>  
  27. </body>  
  28. </html>  

后台：——引用了动软生成的类库

[html]  view plain copy
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Data;  
  8.   
  9. namespace WebApplication1  
  10. {  
  11.     public partial class WebForm1 : System.Web.UI.Page  
  12.     {  
  13.         protected void Page_Load(object sender, EventArgs e)  
  14.         {  
  15.             if (!IsPostBack)  
  16.             {  
  17.                 LoadProvince();  
  18.                 Model.province p = new Model.province();  
  19.                 p.id = 1;  
  20.                 p.provinceID = "111111";  
  21.                 p.provincename = "北京";  
  22.   
  23.                 Model.province p1 = new Model.province();  
  24.                 p1.id = 2;  
  25.                 p1.provinceID = "222222";  
  26.                 p1.provincename = "天津";  
  27.             }  
  28.         }  
  29.   
  30.         private void LoadProvince()  
  31.         {  
  32.             BLL.province bpro = new BLL.province();  
  33.             DataTable dt= bpro.GetList("").Tables[0];  
  34.   
  35.               
  36.             ddlprovince.DataSource = dt;  
  37.             ddlprovince.DataTextField = "provincename";  
  38.             ddlprovince.DataValueField = "provinceID";  
  39.             ddlprovince.DataBind();  
  40.   
  41.         }  
  42.   
  43.         protected void ddlprovince_SelectedIndexChanged(object sender, EventArgs e)  
  44.         {  
  45.             if (this.ddlarear.Items.Count>0)  
  46.             {  
  47.                 this.ddlarear.Items.Clear();  
  48.             }  
  49.             BLL.city bcity = new BLL.city();  
  50.             string proid = this.ddlprovince.SelectedItem.Value;  
  51.               
  52.             DataTable dt = bcity.GetList("father='"+proid+"'").Tables[0];  
  53.   
  54.             ddlcity.DataSource = dt;  
  55.             ddlcity.DataTextField = "cityname";  
  56.             ddlcity.DataValueField = "cityID";  
  57.             ddlcity.DataBind();  
  58.   
  59.             //绑定默认显示的市级区划下面所有的县  
  60.             string cityid= dt.Rows[0]["cityID"].ToString();  
  61.             BLL.area baraer = new BLL.area();  
  62.               
  63.             DataTable dtarea = baraer.GetList("father='" + cityid + "'").Tables[0];  
  64.   
  65.             ddlarear.DataSource = dtarea;  
  66.             ddlarear.DataTextField = "areaname";  
  67.             ddlarear.DataValueField = "areaID";  
  68.             ddlarear.DataBind();  
  69.   
  70.         }  
  71.   
  72.         protected void ddlcity_SelectedIndexChanged(object sender, EventArgs e)  
  73.         {  
  74.             BLL.area baraer = new BLL.area();  
  75.             string cityid = this.ddlcity.SelectedItem.Value;  
  76.   
  77.             DataTable dt = baraer.GetList("father='" + cityid + "'").Tables[0];  
  78.   
  79.             ddlarear.DataSource = dt;  
  80.             ddlarear.DataTextField = "areaname";  
  81.             ddlarear.DataValueField = "areaID";  
  82.             ddlarear.DataBind();  
  83.         }  
  84.     }  
  85. }  

SQL建表

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

Web窗体——WebForm2.aspx

前台：

[html]  view plain copy
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head runat="server">  
  3.     <title></title>  
  4.     <style type="text/css">  
  5.         select  
  6.         {  
  7.             width: 130px;  
  8.         }  
  9.     </style>  
  10. </head>  
  11. <body>  
  12.     <form id="form1" runat="server">  
  13.     <div>  
  14.      <table>  
  15.         <tr><td>地址</td><td>  
  16.             <asp:DropDownList ID="ddlprovince" runat="server" AutoPostBack="True"   
  17.                 onselectedindexchanged="ddlprovince_SelectedIndexChanged">  
  18.             </asp:DropDownList>省  
  19.             <asp:DropDownList ID="ddlcity" runat="server" AutoPostBack="True"   
  20.                 onselectedindexchanged="ddlcity_SelectedIndexChanged">  
  21.             </asp:DropDownList>市  
  22.             <asp:DropDownList ID="ddlarear" runat="server"   
  23.                 >  
  24.             </asp:DropDownList>县  
  25.         </td></tr></table>  
  26.     </div>  
  27.     </form>  
  28. </body>  
  29. </html>  

后台：

[html]  view plain copy
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7.   
  8. namespace WebApplication1  
  9. {  
  10.     public partial class WebForm2 : System.Web.UI.Page  
  11.     {  
  12.         protected void Page_Load(object sender, EventArgs e)  
  13.         {  
  14.             if (!IsPostBack)  
  15.             {  
  16.                 LoadProvince();  
  17.             }  
  18.         }  
  19.   
  20.         private void LoadProvince()  
  21.         {  
  22.             BLL.province bprovince = new BLL.province();  
  23.             List<Model.province> list= bprovince.GetListModel();  
  24.   
  25.             this.ddlprovince.DataSource = list;  
  26.             this.ddlprovince.DataTextField = "provincename";  
  27.             this.ddlprovince.DataValueField = "provinceID";  
  28.             this.ddlprovince.DataBind();  
  29.    
  30.         }  
  31.   
  32.         protected void ddlprovince_SelectedIndexChanged(object sender, EventArgs e)  
  33.         {  
  34.             string id = this.ddlprovince.SelectedItem.Value;  
  35.            BLL.city bcity = new BLL.city();  
  36.             List<Model.city> list = bcity.GetListModel("father="  
  37.                 +id);  
  38.   
  39.             this.ddlcity.DataSource = list;  
  40.             this.ddlcity.DataTextField = "cityname";  
  41.             this.ddlcity.DataValueField = "cityID";  
  42.             this.ddlcity.DataBind();  
  43.         }  
  44.   
  45.         protected void ddlcity_SelectedIndexChanged(object sender, EventArgs e)  
  46.         {  
  47.             string id = this.ddlcity.SelectedItem.Value;  
  48.             BLL.area barear = new BLL.area();  
  49.             List<Model.area> list = barear.GetListModel("father="  
  50.                 +id);  
  51.   
  52.             this.ddlarear.DataSource = list;  
  53.             this.ddlarear.DataTextField = "areaname";  
  54.             this.ddlarear.DataValueField = "areaID";  
  55.             this.ddlarear.DataBind();  
  56.               
  57.   
  58.         }  
  59.     }  
  60. }  
GrapeSSQ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ajax后台可编辑的省市区三级联动
01-04
ajax后台可编辑的省市区三级联动 后台编辑省市区，前台显示，并可以获取到ID以及节点ID
实现select的三级联动
Gadxiong的博客
05-31 1232
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;三级联动&lt;/title&gt; &lt;script type="text/javascript" src="js/jquery-1.11.0.min.js&
前端学习（2284）：react之遍历对象回顾
歌谣的博客
09-26 237
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http.
中国省市区三级联动实例（AJAX实现）
u014313879的专栏
11-09 9879
本文利用ajax实现一个省市区三级联动示例
使用ajax实现省市县三级联动功能
qq_42449963的博客
12-30 1267
声明：我创建的是一个普通的web工程，没有使用maven等，使用的是最原始的javascript代码，只在集合对象转换成Json类型数据的时候导入了jar包； 先给大家看下工程的大体结构： 简单介绍一下然后就在后面直接把代码给大家，我使用的是原始的ajax技术，也就是创建异步请求对象和调用反馈函数的那种技术，连接的是mysql数据库，其实在index.html中写了这些标签：其中那三个selec...
ajax实现无刷新省市县三级联动
10-22
主要为大家详细介绍了ajax实现无刷新省市县三级联动的相关资料,利用三层架构实现，需要的朋友可以参考下
无刷新省市县三级联动
05-23
利用AJAX/三层/WebService来建成的无刷新省市县三级联动
省市县三级联动
05-22
使用ajax实现刷新和不适用ajax实现无刷新两种方法
（全）传智播客PHP就业班视频完整课程
10-30
10-20 5 smarty二级联动 10-20 6 smarty完成静态化 10-20 7 10-20 8 smarty分页技术 10-20 9 10-22 1 ajax介绍 无刷新验证用户名 10-22 2 ajax如何处理xml格式返回数据 10-22 3 json 10-22 4 ajax如何处理json格式...
史上最全韩顺平传智播客PHP就业班视频，10月份全集
03-26
10-20 5 smarty二级联动 10-20 6 smarty完成静态化 10-20 7 10-20 8 smarty分页技术 10-20 9 10-22 1 ajax介绍 无刷新验证用户名 10-22 2 ajax如何处理xml格式返回数据 10-22 3 json 10-22 4 ajax如何处理json格式...
jsp-ajax的三级联动(省市区mysql数据库表)
11-30
用jsp写的，ajax的三级联动。大家可以看看。菜鸟作品多多关照有写好的省市区mysql数据库表 用jsp写的，ajax的三级联动。大家可以看看。菜鸟作品多多关照有写好的省市区mysql数据库表
Ajax实现的三级联动下拉菜单
10-20
struts2+jsp+json+javascript实现的三级下拉菜单，没有service和dao层,数据是虚拟的。需要的欢迎下载。项目直接导入myeclipse就可以使用。访问路径localhost:8080/ajax_day02_hw/proviencecityarea.jsp
使用AJax和JavaScript实现省市区三级联动
住在城北的猫
02-27 1684
Ajax实现省市区 三级联动浅谈Ajax Ajax（Asynchronous JavaScript and XML）异步的javaScript和xml，即可以在整个页面不刷新的情况下，实现局部页面的刷新，主要要的例子有：新浪微博，当然也可以实现三级联动的效果，这正是本博客要着重介绍的内容。 原理图解： 效果图： 实现步骤： 编写三级联动页面
Ajax案例——省市县/区三级联动选择框
挣钱买房买车的博客
10-06 892
省市区县三级联动，选择下拉框的实现
Ajax实现省市区三级联动（JavaWeb）
不是七七子的博客
04-12 1461
先看下效果图： 项目结构： 1.准备数据库 表结构： 我把数据库、jquery和项目所用的jar包上传到了百度云盘，如果有需要可以下载。 链接：https://pan.baidu.com/s/1VijPG7LPeJoOHCa2mZsrww 提取码：fz86 先分析下数据库里面的数据，分析省份、城市、地区之间的联系。 分析ajax执行过程： ajax向服务器发送请求，Servlet接收ajax发来的请求，获取ajax传递的数据。服务器内部调用dao类，获取数据库中的数据，此时数据是Java对象或J
ajax实现数据修改回显,jquery.cityselect.js 三级省市联动（修改数据时可回显）
weixin_42594427的博客
08-06 304
一、插件介绍最早做省市联动的时候都特别麻烦，后来在helloweba的一篇文章中看到这个插件，很不错的，后来就一直用了。省市区联动下拉效果在WEB中应用非常广泛，尤其在一些会员信息系统、电商网站最为常见。开发者一般使用Ajax实现无刷新下拉联动。本文将讲述，利用jQuery插件，通过读取JSON数据，实现无刷新动态下拉省市二(三)级联动效果。二、插件作者及网址作者：暂无(请作者看到后联系我4032...
JQuery+ajax实现省市区三级联动（附：补充代码内容）
tao_fuli的博客
10-28 3956
省市区三级联动的实现（附：补充代码） 有了下面的代码，别忘了导入需要的jar包，用到的jar包到网上都能找到。 如果觉得不错，就点个赞！谢谢观望！！ ##  1.效果图   ##  2.jsp页面，novel.jsp &lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncodin...
JQuery+Ajax实现省市区三级联动（附效果图+数据库）
热门推荐
NaMgAl_的博客
01-09 3万+
一、效果图 1、页面加载后（初始化：北京市-北京市-东城区） 2、单击选择省份后（改变成：河北省-石家庄市-长安区） 二、jsp页面 省市区三级联动 $(function() { // 初始化省市区 initAddress(); // 更改省份后的操作 $("select[name='province']").change(func
springBoot+ajax实现省、市、区三级联动
hdagujd的博客
11-23 360
springBoot+Ajax 实现省、市、区三级联动
ajax省市县三级联动
最新发布
10-22
Ajax省市县三级联动是一种前端技术，通过Ajax异步请求后台数据，实现省市县三级联动的效果。在用户选择省份时，通过Ajax请求后台获取该省份下的城市列表，再根据用户选择的城市获取该城市下的县区列表，最终实现三级...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值