用Ajax制作三级联动菜单_jquery

代码整个过程就是根据客户端的url请求判断哪个下拉列表的选中项发生改变,服务器根据请求url调用sql 数据库生成相应的数据写入tmp.xml并重定向到它.由于XmlHttpRequest对象与服务器交互时会得到执行完服务器代码后的response,所以tmp.xml数据将返回到客户端.这就是整个代码注要思想.值得注意的是在请求url时避免相同url,以免调用缓存中数据.一般方法有设置页面关闭写入缓存开关,在程序中设置头部no-cache或者避免相同url.避免相同url可以在其后面加上当前时间来区分.

// MyADO:自定义ADO类.用来连接sql服务器,得到数据..
 public class MyADO
 {
  public MyADO()
  {
  }
  public static SqlConnection Con(string SqlConnectionString)
  {
   SqlConnection MyCon = new SqlConnection(SqlConnectionString);
   return MyCon;
  }
  public static SqlConnection Con()
  {
   SqlConnection MyCon = new SqlConnection(“server=.;uid=sa;password=network;initial catalog=MyData”);
   return MyCon;
  }
  public static DataTable GetTableData(string TableName,SqlConnection Con)
  {
   SqlCommand MyCmd = new SqlCommand(“select * from “+TableName,Con);
   DataTable MyTable = new DataTable();
   SqlDataAdapter MyAdapter = new SqlDataAdapter(MyCmd);
   MyAdapter.Fill(MyTable);
            return MyTable;
  }
  public static DataTable GetTableData(string CommandString)
  {
   SqlCommand MyCmd = new SqlCommand(CommandString,Con());
   DataTable MyTable = new DataTable();
   SqlDataAdapter MyAdapter = new SqlDataAdapter(MyCmd);
   MyAdapter.Fill(MyTable);
   return MyTable;
  }
 }

//————————————main.aspx———————————————————————————
private void Page_Load(object sender, System.EventArgs e)
  {
   if(!Page.IsPostBack)
   {
    Response.Clear();
    DataSet MyDS = new DataSet();
    if(Request.Url.ToString().IndexOf(“?part=state”) != -1)
    {
     MyDS.Tables.Add(MyADO.GetTableData(“select * from Area where sz_code%10000=0”));
    }
    else if(Request.Url.ToString().IndexOf(“?part=city”) != -1 && Request.Url.ToString().IndexOf(“sz_code=”) != -1)
    {
     string str = Request.QueryString[“sz_code”].ToString();
     str = str.Substring(0,2)+”_[1-9]00″;
     MyDS.Tables.Add(MyADO.GetTableData(“select * from Area where sz_code like ‘”+str+”‘”));
    }
    else if(Request.Url.ToString().IndexOf(“?part=town”) != -1 && Request.Url.ToString().IndexOf(“sz_code=”) != -1)
    {
     string str = Request.QueryString[“sz_code”].ToString();
     str = str.Substring(0,4)+”_[1-9]”;
     MyDS.Tables.Add(MyADO.GetTableData(“select * from Area where sz_code like ‘”+str+”‘”));
    }
    MyDS.WriteXml(Request.PhysicalApplicationPath+”test.xml”);
    Response.Redirect(“test.xml?timestamp=”+Request.QueryString[“timestamp”].ToString());
   }
//————————————————————————————————————————-

<script type=”text/JavaScript“>…
  var xhrObject;  //xmlhttpresponse对象
  var SelectID; //当前要填充的下拉列表ID

  function GetXhrObject()
  …{
   var XmlObject;
   if(window.ActiveXObject)
   …{
    XmlObject =  new ActiveXObject(“Microsoft.XMLHTTP”);
   }
   else if(window.XMLHttpRequest)
   …{
    XmlObject = new XMLHttpRequest();
   }
   return XmlObject;
  }
 
  function MyEvent()
  …{
  var obj;
  var NewOption;

   if (xhrObject.readystate == 4)
   …{
    if(xhrObject.status == 200)
    …{
     obj = xhrObject.responseXml;
    
     <!–如果用户改变省份选项–>
     if(SelectID==’city’)
     …{
      document.getElementById(“city”).options.length=1;
     }
    
     <!–如果用户改变城市选项–>
     if(SelectID==’town’)
     …{
      document.getElementById(“town”).options.length=1;
     }

     for(i=0;i<obj.getElementsByTagName(“name”).length;i++)
     …{
      NewOption = new Option(obj.getElementsByTagName(“name”)[i].childNodes[0].nodeValue,obj.getElementsByTagName(“sz_code”)[i].childNodes[0].nodeValue);
      document.getElementById(SelectID).options.add(NewOption)
     }
        
    }
   }

  }
 
  function GetSelect(citytype)
  …{
   xhrObject=GetXhrObject();
   xhrObject.onreadystatechange = MyEvent;
  
   var QueryString;
   if(citytype == ‘city’)
   …{
    SelectID = “city”;
    QueryString = document.getElementById(“select”).value;
    xhrObject.open(“GET”,”select.aspx?part=city&sz_code=”+QueryString+”&timeStamp=”+new Date().getTime());
   }
   else if(citytype == ‘town’)
   …{
    SelectID = “town”;
    QueryString = document.getElementById(“city”).value;
    xhrObject.open(“GET”,”select.aspx?part=town&sz_code=”+QueryString+”&timeStamp=”+new Date().getTime());
   }
   else if(citytype == ‘state’)
   …{
    SelectID = “select”;
    xhrObject.open(“GET”,”select.aspx?part=state&timestamp=”+new Date().getTime());
   }

   xhrObject.send(null);
  }
</script>

  <input style=”Z-INDEX: 100; LEFT: 64px; WIDTH: 64px; POSITION: absolute; TOP: 328px; HEIGHT: 22px” type=”button”>
    <SELECT id=”town” style=”Z-INDEX: 104; LEFT: 360px; WIDTH: 80px; POSITION: absolute; TOP: 152px”>
    <option value=”区县”>县区</option>
    </SELECT><SELECT id=”city” style=”Z-INDEX: 103; LEFT: 272px; WIDTH: 80px; POSITION:absolute; TOP: 152px”>
    <option value=”城市”>城市</option>
   </SELECT><SELECT id=”select” style=”Z-INDEX: 101; LEFT: 144px; WIDTH: 120px; POSITION: absolute; TOP: 152px”>
   <option value=”省份”>省份</option>
   </SELECT>
  县区 城市 省份

欢迎大家阅读《用Ajax制作三级联动菜单_jquery》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码

喜欢 (0)赏

[搞代码]

分享 (0)