GVKun编程网logo

loner_li AJax 无刷新 省市县三级联动（webservice+sqlhelp）客户端控件版和 有刷新 web版

22

想了解loner_liAJax无刷新省市县三级联动的新动态吗？本文将为您提供详细的信息，我们还将为您解答关于webservice+sqlhelp客户端控件版和有刷新web版的相关问题，此外，我们还将为

想了解loner_li AJax 无刷新 省市县三级联动的新动态吗？本文将为您提供详细的信息，我们还将为您解答关于webservice+sqlhelp客户端控件版和 有刷新 web版的相关问题，此外，我们还将为您介绍关于ajax 实现无刷新实现省市县(区)三级联动、Ajax 实现省市县 三级联动【无刷新】三层 | 三级联动—有刷新、ajax不刷新的情况下省市县三级联动、Ajax使用WebService无刷新验证注册用户的唯一性的新知识。

本文目录一览：

loner_li AJax 无刷新 省市县三级联动（webservice+sqlhelp）客户端控件版和 有刷新 web版

loner_li AJax 无刷新 省市县三级联动（webservice+sqlhelp）客户端控件版和 有刷新 web版

前台页面

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
bindprovince(); //在加载的时候，绑定省的方法
function bindprovince() {
$.ajax({
type: "post",
contentType: "application/json",
url: "WebService1.asmx/provinceData",
data: "{}",
success: function (result) {
var table = result.d;
var thcount = $(table).find('tr').length; //总共有多少行距
// alert(thcount);
$(table).find('tr').each(function () {
var myoption = "<option value=" + $(this).children().eq(0).text() + ">";
myoption += $(this).children().eq(1).text() + "</option>";
$('#Select1').append(myoption);
});
}
})
}

//下面是绑定市的方法
$('#Select1').change(function () {
var faid = $(this).val();
$('#Select2').children().remove();
//alert(faid);
$.ajax({
type: "post",
url: "WebService1.asmx/cityData",
data: "{faid:'" + faid + "'}",
success: function (result) {
var table = result.d;
$(table).find('tr').each(function () {
var myoption = "<option value=" + $(this).children().eq(0).text() + " >";
myoption += $(this).children().eq(1).text();
myoption += "</option>";
$('#Select2').append(myoption);

});

}
})
})

//下面是绑定县的方法
$('#Select2').bind("change",function () {
$('#Select3').children().remove();
$.ajax({
type: "post",
url: "WebService1.asmx/xianData",
data: "{faid:'" + $(this).val() + "'}",
success: function (result) {
var table = result.d;
$(table).find('tr').each(function () {
var myoption = "<option value=" + $(this).children().eq(0).text() + ">";
myoption += $(this).children().eq(1).text() + "</option>";
$('#Select3').append(myoption);
})
}
})
})
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="mydiv">
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="DropDownList2" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="DropDownList3" runat="server">
</asp:DropDownList>
<div>
<input id="Text1" type="text" /><br />
省：<select id="Select1">
<option>--请选择--</option>
</select>
市：<select id="Select2">
<option>--请选择--</option>
</select>
县：<select id="Select3">
<option>--请选择--</option>
</select>
</div>
</div>
</form>
</body>
</html>

WebService1.asmx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;
using System.Text;
using System.Data.sqlClient;

namespace AJaxpcA
{
/// <summary>
/// WebService1 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolBoxItem(false)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
public class WebService1 : System.Web.Services.WebService
{

[WebMethod]
public string HelloWorld()
{
return "Hello World";
}
[WebMethod]
public string provinceData()
{
string constr = "select provinceID,province from province";
DataTable dt = sqlhelper.getDate(constr,CommandType.Text);
StringBuilder sb = new StringBuilder();
sb.Append("<table>");
foreach (DaTarow row in dt.Rows)
{
sb.Append("<tr><td>");
sb.Append(row["provinceID"].ToString() + "</td><td>");
sb.Append(row["province"].ToString() + "</td></tr>");
}
sb.Append("</table>");
return sb.ToString();


}
[WebMethod]
public string cityData(string faid)
{
string str = "select cityID,city from city where father=@fid";
DataTable dt = sqlhelper.getDate(str,CommandType.Text,new sqlParameter("@fid",faid));
StringBuilder sb = new StringBuilder();
sb.Append("<table>");
foreach (DaTarow row in dt.Rows)
{
sb.Append("<tr>");
sb.Append("<td>" + row["cityID"].ToString() + "</td>");
sb.Append("<td>" + row["city"].ToString() + "</td>");
sb.Append("</tr>");
}
sb.Append("</table>");
return sb.ToString();
}

[WebMethod]
public string xianData(string faid)
{
string str = "select areaID,area from area where father=@fid";
DataTable xdt = sqlhelper.getDate(str,faid));
StringBuilder sb = new StringBuilder();
sb.Append("<table>");
foreach (DaTarow row in xdt.Rows)
{
sb.Append("<tr>");
sb.Append("<td>" + row["areaID"].ToString() + "</td>");
sb.Append("<td>" + row["area"].ToString() + "</td>");
sb.Append("</tr>");
}
sb.Append("</table>");
return sb.ToString();
}
}
}

sqlhelp类

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Configuration;
using System.Data;
using System.Data.sqlClient;

namespace AJaxpcA
{
public class sqlhelper
{
private static string constr = ConfigurationManager.ConnectionStrings["sqlPCA"].ConnectionString;

/// <summary>
/// 得到数据以datatable的形式返回
/// </summary>
/// <param name="sqltext">执行的命令文本</param>
/// <param name="commandtype">命令类型</param>
/// <param name="sq">命令参数</param>
/// <returns></returns>
public static DataTable getDate(string sqltext,CommandType commandtype,params sqlParameter[] pms)
{
DataTable dt = null;
using (sqlConnection con = new sqlConnection(constr))
{
using (sqlCommand com = con.CreateCommand())
{
com.CommandText = sqltext;
com.Parameters.AddRange(pms);
sqlDataAdapter da = new sqlDataAdapter(com);
dt = new DataTable();
da.Fill(dt);
}
}
return dt;
}
}

}

------------------------------------------------有刷新 web版------------------

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data.sqlClient;
using System.Data;

namespace YProject
{
public partial class YRegister : System.Web.UI.Page
{
protected void Page_Load(object sender,EventArgs e)
{
if (!this.Page.IsPostBack)
{
getddlProvinceDataBind(); //页面首次加载执行省份绑定


}

}
public DataSet getDataSet(string sql) //自定义方法，sql语句参数，返回DataSet数据集
{
string connection = ConfigurationManager.ConnectionStrings["sqlcon"].ConnectionString;
sqlConnection conn = new sqlConnection(connection);
sqlDataAdapter sda = new sqlDataAdapter(sql,conn);
DataSet ds = new DataSet();
sda.Fill(ds);
return ds;
}
public void getddlProvinceDataBind() //省份数据绑定
{
string sqlProvince = "SELECT * FROM province";
DropDownList1.DataSource = getDataSet(sqlProvince);
DropDownList1.DataTextField = "province";
DropDownList1.DataValueField = "provinceID";
DropDownList1.DataBind();

DropDownList1.Items.Insert(0,new ListItem("--省份--","0"));
}



protected void DropDownList1_SelectedindexChanged(object sender,EventArgs e)
{
//第一层，省份选择事件
{
int ProvinceID = Convert.ToInt32(DropDownList1.SelectedValue);
if (ProvinceID > 0)
{
string sqlCity = "SELECT * FROM city WHERE father=" + ProvinceID + ""; //根据省份ID找城市
DropDownList2.DataSource = getDataSet(sqlCity);
DropDownList2.DataTextField = "city";
DropDownList2.DataValueField = "cityID";
DropDownList2.DataBind();

DropDownList2.Items.Insert(0,new ListItem("--请选择城市--","0"));
}
else
{
DropDownList2.Items.Clear();
DropDownList2.Items.Insert(0,"0"));
DropDownList2.Items.Clear();
DropDownList2.Items.Insert(0,new ListItem("--请选择县区--","0"));
}
}
}

protected void DropDownList2_SelectedindexChanged(object sender,EventArgs e)
{
//第二层，城市件
{
int CityID = Convert.ToInt32(DropDownList2.SelectedValue);
if (CityID > 0)
{
string sqldistrict = "SELECT * FROM area WHERE father=" + CityID + ""; //根据城市ID找县区
DropDownList3.DataSource = getDataSet(sqldistrict);
DropDownList3.DataTextField = "area";
DropDownList3.DataValueField = "areaID";
DropDownList3.DataBind();

DropDownList3.Items.Insert(0,"0"));
}
else
{
DropDownList3.Items.Clear();
DropDownList3.Items.Insert(0,"0"));
}
}

}

protected void DropDownList3_SelectedindexChanged1(object sender,EventArgs e)
//第三层，县区选择事件
{
int ProvinceID = Convert.ToInt32(DropDownList1.SelectedValue);
int CityID = Convert.ToInt32(DropDownList2.SelectedValue);
int districtID = Convert.ToInt32(DropDownList3.SelectedValue);
//if (ProvinceID > 0 && CityID > 0 && districtID > 0)
//{
// Response.Write("您选择的省份ID：" + ProvinceID + "城市ID：" + CityID + "县区ID：" + districtID + "");
//}
}


} }

ajax 实现无刷新实现省市县(区)三级联动

ajax 实现无刷新实现省市县(区)三级联动

总结

以上是小编为你收集整理的ajax 实现无刷新实现省市县(区)三级联动全部内容。

如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。

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

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

sql建表


HTML——HTMLPage1.htm

[html] view plain copy
@H_301_18@ @H_301_18@ @H_301_18@
  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>
@H_301_18@
创建Web服务——WebService1.asmx

copy

@H_301_18@ @H_301_18@ @H_301_18@
    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. }
@H_301_18@

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

province表——动软生成类

GetListModel在BLL层定义

GetListModel转到定义——DAL层

city表——动软生成类

city在BLL层定义

copy

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

city转到定义——DAL层
copy
@H_301_18@ @H_301_18@ @H_301_18@
    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
    @H_301_18@ @H_301_18@ @H_301_18@
      area转到定义——DAL层
      copy
      @H_301_18@ @H_301_18@ @H_301_18@
        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

        @H_301_18@ @H_301_18@ @H_301_18@
          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

          @H_301_18@ @H_301_18@ @H_301_18@
            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. }
          @H_301_18@
          Web窗体——WebForm2.aspx

          前台：

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

            copy

            @H_301_18@ @H_301_18@ @H_301_18@
              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. }
            @H_301_18@

            总结

            以上是小编为你收集整理的Ajax 实现省市县 三级联动【无刷新】三层 | 三级联动—有刷新全部内容。

            如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。

        Ajax相关文章

        学会iframe并用其解决跨域问题
        我们设置了一个名为ifr，宽为600，高为400，显示边框，隐藏滑动条，显示文档为b站（也可以选择本地html文档）的内联框架。我们可以在iframe标签中写上文字说明，因为有一些低版本浏览器不支持这个标签，显示不了文档的时候就会在页面显示我们写的文字。父页面通过iframe嵌入子页面，通过iframe.contentWindow获取子页面的window,即可操作子页面，子页面通过parent.window和parent来访问父页面的window。src:规定在 中显示的文档的 URL。...
        【Ajax】全面详细了解git的基础操作【万字教学+面试常客】
        Git是一个开源的分布式版本控制系统，是目前世界上最先进，最流行的版本控制系统。可以快速高效地处理从很小到非常大的项目版本管理。特点：项目越大越复杂，协同开发者越多，越能体现出Git的高性能和高可用性。
        什么是Ajax？
        AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。Ajax最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页
        基于Vue、Axios、Node.js的图书管理系统【网页前端高级编程】
        基于Vue、Ajax、Node.js的图书管理系统，网页前端高级编程实现了在网页上进行增删改查,web与后端的数据交互模拟。适合初学者前端入门,适合期末网页前端课程设计实践。欢迎大家积极阅读，如有不足请及时批评指出。...
        Ajax简介与基本使用
        本文为Ajax简介与基本使用相关知识，首先将对Ajax进行简介（包含：什么是Ajax、Ajax的作用、Ajax的好处），然后介绍JS方式Ajax的实现（包含发送 Ajax 请求的五个步骤、创建 XMLHttpRequest 对象、向服务器发送请求、服务器响应等），最后介绍jQuery框架中的Ajax（具体包含：jQuery框架的Ajax简介、$.ajax()方法、$.get()方法、$.post()方法等）。
        b站黑马JavaScript的Ajax案例代码——聊天机器人案例
        b站黑马JavaScript的Ajax案例代码——聊天机器人案例。该案例需要更换视频中老师的两个接口为本文中新的两个接口。！！！本文内含有有声音的效果展示视频，播放的时候注意音量！！！
        Ajax（实现前后端交互效果）
        一眼看中的Ajax
        Filter&Listener&Ajax的介绍
        ▶ 概述`AJAX` (Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。概念中的`JavaScript` 表明该技术和前端相关；`XML` 是指以此进行数据交换。▶ 作用AJAX 作用有以下两方面：▷ 1. 与服务器进行数据交换：通过AJAX可以给服务器发送请求，服务器将数据直接响应回给浏览器。
      • • 学会iframe并用其解决跨域问题
      • • 【Ajax】全面详细了解git的基础操作【万
      • • 什么是Ajax？
      • • 基于Vue、Axios、Node.js的图书管理系统
      • • Ajax简介与基本使用
      • • b站黑马JavaScript的Ajax案例代码——聊
      • • Ajax（实现前后端交互效果）
      • • Filter&Listener&Ajax的介绍
      • • 第一节：ExtJS调用WCF系列-----实现JSO
      • • Asp.Net开发架构设计（二）
      HTMLreactjsCSSNode.jsangulartypescriptvue.jsreact-natispringkotlinAPIseleniumtensorflowbashangularJSexpressxcodematplotlibflaskHibernatedictionaryrailscocoswebnpmreact-hookmongoosegoogle-appformswpfRestwebpackunit-testihttpclassfileNext.jsJsHTML5bootstrap-
    • 友情链接:
    • 菜鸟教程
    • 前端之家
    • 编程小课
    • 小编
      • -
    • 我要投稿
      • -
    • 广告合作
      • -
    • 联系我们
      • -
    • 免责声明
      • -
    • 网站地图
    版权所有 © 2018 小编 闽ICP备13020303号-8
    微信公众号搜索 “ 程序精选 ” ，选择关注！
    微信公众号搜"程序精选"关注
    微信扫一扫可直接关注哦！

ajax不刷新的情况下省市县三级联动

ajax不刷新的情况下省市县三级联动

这次给大家带来ajax不刷新的情况下省市县三级联动，ajax不刷新实现省市县三级联动的注意事项有哪些，下面就是实战案例，一起来看一下。

本文实例为大家分享了ajax实现无刷新省市县三级联动的具体代码，供大家参考，具体内容如下

效果图：

实现代码：

1、html：

  <title></title>
    <style>
    select
    {
      width: 150px;
    }
  </style>
  <script></script>
  <script>
    $(function () {
      $.ajax({
        type: "post",
        contentType: "application/json",
        url: "WebService1.asmx/GetProvince",
        data: "{}",
        success: function (result) {
          var stroption = &#39;&#39;;
          for (var i = 0; i < result.d.length; i++) {
            stroption += &#39;<option value=&#39; + result.d[i].provinceID + &#39;>&#39;;
            stroption += result.d[i].provincename;
            stroption += &#39;&#39;;
          }
          $(&#39;#seprovince&#39;).append(stroption);
        }
      })
      $(&#39;#seprovince&#39;).change(function () {
       $(&#39;#secity option:gt(0)&#39;).remove();
        $(&#39;#searea option:gt(0)&#39;).remove();
        $.ajax({
          type: "post",
          contentType: "application/json",
          url: "WebService1.asmx/GetCItyByPro",
          data: "{proid:&#39;" + $(this).val() + "&#39;}",
          success: function (result) {
            var strocity = &#39;&#39;;
            for (var i = 0; i < result.d.length; i++) {
              strocity += &#39;<option value=&#39; + result.d[i].cityID + &#39;>&#39;;
              strocity += result.d[i].cityname;
              strocity += &#39;&#39;;
            }
            $(&#39;#secity&#39;).append(strocity);
          }
        })
      })
      $(&#39;#secity&#39;).change(function () {
        $(&#39;#searea option:gt(0)&#39;).remove();
        $.ajax({
          type: "post",
          contentType: "application/json",
          url: "WebService1.asmx/GetAreaByCity",
          data: "{cityid:&#39;" + $(this).val() + "&#39;}",
          success: function (result) {
            var stroarea = &#39;&#39;;
            for (var i = 0; i < result.d.length; i++) {
              stroarea += &#39;<option value=&#39; + result.d[i].areaID + &#39;>&#39;;
              stroarea += result.d[i].areaname;
              stroarea += &#39;&#39;;
            }
            $(&#39;#searea&#39;).append(stroarea);
          }
        })
      })
    })
  </script>
 
登录后复制
                                                                                                                          
        用户名                       
        密码                       
        确认密码                       
        邮箱                       
        地址                         省         市         县       

2、WebService1.asmx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
namespace 省市县三级联动
{
  /// <summary>
  /// WebService1 的摘要说明
  /// </summary>
  [WebService(Namespace = "http://tempuri.org/")]
  [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
  [System.ComponentModel.ToolboxItem(false)]
  // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
   [System.Web.Script.Services.ScriptService]
  public class WebService1 : System.Web.Services.WebService
  {
    [WebMethod]
    public string HelloWorld()
    {
      return "Hello World";
    }
    [WebMethod]
    public List<model.province> GetProvince()
    {
      BLL.province bpro = new BLL.province();
      List<model.province> list = bpro.GetListModel();
      return list;
    }
    [WebMethod]
    public List<model.city> GetCItyByPro(string proid)
    {
      BLL.city bcity = new BLL.city();
      List<model.city> list = bcity.GetListModel("father=''" + proid + "''");
      return list;
    }
    [WebMethod]
    public List<model.area> GetAreaByCity(string cityid)
    {
      BLL.area barea = new BLL.area();
      List<model.area> list = barea.GetListModel("father=''" + cityid + "''");
      return list;
    }
  }
}</model.area></model.area></model.city></model.city></model.province></model.province>
登录后复制

在三层的Bll层中的city.cs和area.cs中分别添加以下属性

//city.cs：
  public List<model.city> GetListModel(string strsql)
    {
      return dal.GetListModel(strsql);
    }
//area.cs：
   public List<model.area> GetListModel(string strsql)
    {
      return dal.GetListModel(strsql);
    }</model.area></model.city>
登录后复制

在三层的DAL层中的city.cs和area.cs中分别添加以下方法

//city.cs：
public System.Collections.Generic.List<model.city> GetListModel(string strsql)
    {
      System.Collections.Generic.List<model.city> list = new System.Collections.Generic.List<model.city>();
      DataTable dt = GetList(strsql).Tables[0];
      foreach (DataRow row in dt.Rows)
      {
        Model.city mcity = new Model.city();
        mcity.id = Convert.ToInt32(row["id"]);
        mcity.cityID = row["cityID"].ToString();
        mcity.cityname = row["cityname"].ToString();
        list.Add(mcity);
      }
      return list;
    }
//area.cs：
  public System.Collections.Generic.List<model.area> GetListModel(string strsql)
    {
      DataTable dt = GetList(strsql).Tables[0];
      System.Collections.Generic.List<model.area> list = new System.Collections.Generic.List<model.area>();
      foreach (DataRow row in dt.Rows)
      {
        Model.area marea = new Model.area()
        {
          id = Convert.ToInt32(row["id"]),
          areaID = row["areaID"].ToString(),
          areaname = row["areaname"].ToString()
        };
        list.Add(marea);
      }
      return list;
    }</model.area></model.area></model.area></model.city></model.city></model.city>
登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

AJAX实现显示页面后才加载

AJAX怎么实现异步刷新和局部刷新

以上就是ajax不刷新的情况下省市县三级联动的详细内容，更多请关注php中文网其它相关文章！

Ajax使用WebService无刷新验证注册用户的唯一性

Ajax使用WebService无刷新验证注册用户的唯一性

总结

以上是小编为你收集整理的Ajax使用WebService无刷新验证注册用户的唯一性全部内容。

如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。

今天关于loner_li AJax 无刷新 省市县三级联动和webservice+sqlhelp客户端控件版和 有刷新 web版的介绍到此结束，谢谢您的阅读，有关ajax 实现无刷新实现省市县(区)三级联动、Ajax 实现省市县 三级联动【无刷新】三层 | 三级联动—有刷新、ajax不刷新的情况下省市县三级联动、Ajax使用WebService无刷新验证注册用户的唯一性等更多相关知识的信息可以在本站进行查询。

本文标签：

上一篇loner_li AJax 无刷新 省市县三级联动（最终版）（webservice+三层）Html版和 有刷新的 web版 （2）

下一篇DWR中获取Session（dw select）

相关文章