使用xmlhttp实现无刷新三级联动

转载 2007年09月20日 09:05:00
使用xmlhttp
  最近正在做一个分类信息的程序,正做到实现无刷新三级联动的问题,从网上查了不少方法,最后使用选择了xmlhttp方法实现,并对代码进行了多次改进,现提供给大家参考。此为ListBox控件示例,DropDownList只需将控件名改一下就可以了。
数据库结构为:
  id 自动编号
  oneid 数值型 一级分类id
  twoid 数值型 二级分类id
  threeid 数值型 三级分类id
  sort 数值型 排序
  classname 字符型 分类名称

  数据库下载
  /Files/netshuai/class.rar
  aspx页面javascript代码
  <script type="text/javascript">
function XmlPost(str)
{
  var webFileUrl="";
  document.all("<% =Lbx_ClassThree.ClientID %>").length=0;
  if(str==1)
  {
  webFileUrl = "?oneid=" + document.all("<% =Lbx_ClassOne.ClientID %>").value;
  document.all("<% =Lbx_ClassTwo.ClientID %>").length=0;
  }
  else
  {
  webFileUrl = "?oneid=" + document.all("<% =Lbx_ClassOne.ClientID %>").value+"&twoid="+document.all("<% =Lbx_ClassTwo.ClientID %>").value;
  }
  var result = "";
  var xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
  xmlHttp.open("Post", webFileUrl, false);
  xmlHttp.send("");
  result = xmlHttp.responseText;
  if(result != "")
  {
  var piArray = result.split(",");
  if(str==1)
  {
  for(var i=0; i<piArray.length; i++)
  {
  var ary1 = piArray[i].toString().split("|");
  document.all("<% =Lbx_ClassTwo.ClientID %>").options.add(new Option(ary1[1].toString(),ary1[0].toString()));
   }
  }
  else
  {
  for(var i=0; i>piArray.length; i++)
  {
  var ary1 = piArray[i].toString().split("|");
  document.all("<% =Lbx_ClassThree.ClientID %>").options.add(new Option(ary1[1].toString(),ary1[0].toString()));
  }
  }
  }
}
  </script>
  aspx页面控件代码
  <asp:ListBox ID="Lbx_ClassOne" runat="server" Height="300px" Width="150px"></asp:ListBox>
  <asp:ListBox ID="Lbx_ClassTwo" runat="server" Height="300px" Width="150px"></asp:ListBox>
  <asp:ListBox ID="Lbx_ClassThree" runat="server" Height="300px" Width="150px" ></asp:ListBox>
  cs页面代码
  protected void Page_Load(object sender, EventArgs e)
  {
  string strOneid = "", strTwoid = "";
  if (Request["oneid"] != null && Request["oneid"].ToString() != "")
  {
  strOneid = Request["oneid"].ToString();
  }
  if (Request["twoid"] != null && Request["twoid"].ToString() != "")
  {
  strTwoid = Request["twoid"].ToString();
  }
  if (strOneid != "")
  {
  Lbx_Class_Bind(strOneid, strTwoid);
  }
  if (!this.IsPostBack)
  {
  Lbx_ClassOne_Bind();
  Lbx_ClassOne.Attributes.Add("onchange", "XmlPost(1)");
  Lbx_ClassTwo.Attributes.Add("onchange", "XmlPost(2)");
  }
  }
private void Lbx_ClassOne_Bind()
{
  string strSQL;
  strSQL = "select * from nts_infoclass where oneid<>0 and twoid=0 and threeid=0 order by sort";
  Lbx_ClassOne.DataSource = DataClass.GetDataReader(strSQL); //此处为我写的一个取DataReader对象的类
  Lbx_ClassOne.DataTextField = "classname";
  Lbx_ClassOne.DataValueField = "oneid";
  Lbx_ClassOne.DataBind();
  }
private void Lbx_Class_Bind(string oneid, string twoid)
{
  string strSQL = "",idname="";
  if (oneid != "" && twoid == "")
  {
  strSQL = "select * from nts_infoclass where twoid<>0 and threeid=0 and oneid=" + oneid + " order by sort";
  idname = "twoid";
  }
  if (oneid != "" && twoid != "")
  {
  strSQL = "select * from nts_infoclass where threeid<>0 and oneid=" + oneid + " and twoid=" + twoid + " order by sort";
  idname = "threeid";
  }
  string mystr = "";
  OleDbDataReader dr = DataClass.GetDataReader(strSQL); //此处为我写的一个取DataReader对象的类
  while (dr.Read())
  {
  mystr += "," + dr[idname].ToString() + "|" + dr["classname"].ToString();
  }
  if (mystr != "")
  {
  mystr = mystr.Substring(1);
  }
  dr.Close();
  this.Response.Write(mystr);
  this.Response.End();
  } 

MVC三级联动无刷新

本篇实现有关客户、订单和产品的无刷新三级联动,先看最终效果:   没有选择时,后2个Select状态为禁用:    当选择第1个Select,第2个Select可供选择,第...
  • shan1774965666
  • shan1774965666
  • 2014年09月03日 09:12
  • 482

SSM+Maven实现无刷新三级联动

jsp代码: "> $(function() {
  • u014676619
  • u014676619
  • 2016年05月18日 22:29
  • 1138

Ajax局部刷新实现三级联动

达人科技 2017-03-21 08:26 要实现从数据库获取出数据来实现联动,可以使用ajax(Asynchronous javascript and xml (异步的javascript 和...
  • u011277123
  • u011277123
  • 2017年03月24日 11:16
  • 283

ajax+struts2实现三级联动和页面无刷新案例详解

大致实现思想:         1.三级联动表t_data_level主要字段id,parentid,value,name,级联就是通过id与parentid关联查出;         2.页面无...
  • lxhjava
  • lxhjava
  • 2016年12月03日 23:52
  • 1156

Javascript实现三级联动

三级联动:就是平时网页上需要选择的省市县对应位置的下拉栏模块,当选择好省位置后市的下拉栏更新为已选省的,县类似。 三级联动 ...
  • m0_37460263
  • m0_37460263
  • 2017年07月14日 20:23
  • 582

中国省市区三级联动实例(AJAX实现)

本文利用ajax实现一个省市区三级联动示例
  • u014313879
  • u014313879
  • 2014年11月09日 18:21
  • 5664

ajax技术实现select三级联动

本文利用ajax技术从数据库中获取数据,动态实现select三级联动,效果图如下: 前端js代码如下: $(document).ready(function(){ $.ajax({ typ...
  • adgjlxxx
  • adgjlxxx
  • 2015年12月18日 17:22
  • 2226

jQuery+php+MySQL一张表实现三级联动菜单

初学编程,PHP+MYSQL的三级联动菜单憋了很久,终于做了出来。 PHP页面1: //初始化片区select $(function(){ $.post("1.php?type...
  • hongweigreat
  • hongweigreat
  • 2015年10月29日 11:28
  • 1063

三级联动js,jQuery的实现方法

三级联动(省-市-县)      1,获取包含省-市-县的js文件:http://download.csdn.net/detail/dengxt/9657613          下载好js文...
  • dengxt
  • dengxt
  • 2016年10月19日 13:55
  • 2609

Ajax实现简单三级联动

使用简单的Servlet响应前端请求,结合ajax实现省-市-县的三级联动(后台Service层和dao层代码省略) 前端页面展示: --------请选择-------- ...
  • caomeijie
  • caomeijie
  • 2017年06月01日 10:23
  • 162
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用xmlhttp实现无刷新三级联动
举报原因:
原因补充:

(最多只允许输入30个字)