博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

用Ajax实现三级联动

Posted on 2006-12-07 16:09  爱情沙漠  阅读(1118)  评论(0)  编辑  收藏  举报

      
      在没有接触Ajax之前，总觉得它是那么遥不可及．大家都知道，Ajax它不是一项技术．它是多种技术的结合．光是JS已让人很头痛了，再加上XML,XHTML,XMLHttpRequest,CSS,DOM等，更是让人晕头转向．呵．．．晕归晕，可是工作上需要，你不得不学．于是上两个星期决定下来，这两个星期一定要把Ajax搞个明白．经过偶两个星期的夜车，终于让自己有了点眉目．下面则是偶做的一个三级联动．．．
　　
　前台代码：　

  1<%@ Page Language="C#" AutoEventWireup="true" CodeFile="selectStudent.aspx.cs" Inherits="selectStudent" %>
  2
  3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4
  5<html xmlns="http://www.w3.org/1999/xhtml" >
  6<head runat="server">
  7    <title>无标题页</title>
  8</head>
  9<script language="javascript" type="text/javascript">
 10    function loadclass()
 11   {
 12        var ddlclass=document.getElementById("ddlClass");    //定义一个ddlClass,用于当选定ddlGrade时加载数据
 13        ddlclass.innerText="";
 14        
 15        for(var i=0;i<ddlclass.length;i++)                                 //当它第一次加载时已有数据所以得清空它.
 16        {
 17            ddlclass.remove(i);
 18        }
 19        
 20        var xmlhttp;                                                                 //创建一个XMLHttpRequest对象
 21        try{
 22            xmlhttp=new ActiveXObject('Msxml2.XMLHTTP');
 23            }catch(e){
 24            try{
 25                xml=new ActiveXObject('Microsoft.XMLHTTP');
 26                }catch(e){
 27                 try{
 28                          xml=new XMLHttpRequest();          
 29                      }catch(e){}
 30                 }
 31        }
 32            
 33         var gradenumber=document.getElementById("ddlGrade").value;
 34         
 35         
 36         xmlhttp.onreadystatechange=function()                    //当异步请求成功,所要处理的事情.
 37         {
 38            if(xmlhttp.readyState==4)
 39            {
 40                if(xmlhttp.status==200)
 41               { 
 42                    var classitem = xmlhttp.responseText;          //获取服务器返回的值
 43                    //alert(xmlhttp.responseText);
 44         
 45                    if(classitem !="")
 46                    {
 47                        var allArry=classitem.split(",");         //把所返回的值作为字符串拆分
 48         
 49                        for(var i=1;i<allArry.length;i++)
 50                        {
 51                            var thisArry=allArry[i].split("|");
 52                            document.getElementById("ddlClass").options.add(new Option(thisArry[1].toString(),thisArry[0].toString()));     //再把字符串添加到ddlClass中
 53                        } 
 54                    }
 55                    
 56                    var classnumber=document.getElementById("ddlClass").value;
 57                    loadstudent();
 58                    
 59                }
 60               else
 61               {
 62                    alert("网络失败");
 63               } 
 64            }
 65       }
 66      
 67        xmlhttp.open("GET","selectStudent.aspx?gradenumber="+gradenumber,false);       //创建一个请求.
 68        xmlhttp.send(null);    
 69       
 70   } 
 71     
 72   function loadstudent()
 73   {
 74        var ddlstudent=document.getElementById("ddlStudent");
 75        ddlstudent.innerText="";
 76        
 77        var classnumber=document.getElementById("ddlClass").value;
 78        
 79        for(var i=0;i<ddlstudent.length;i++)
 80        {
 81            ddlstudent.remove(i);
 82        }
 83        
 84        var xmlhttp2;
 85        try{
 86            xmlhttp2=new ActiveXObject('Msxml2.XMLHTTP');
 87        }catch(e){
 88            try{
 89                xmlhttp2=new ActiveXObject('Microsoft.XMLHTTP');
 90            }catch(e){
 91                try{
 92                    xmlhttp2=new XMLHttpRequest();
 93                }catch(e){}
 94            }
 95        }
 96        
 97        xmlhttp2.onreadystatechange=function()
 98        {
 99            if(xmlhttp2.readyState==4)
100            {
101                if(xmlhttp2.status==200)
102               {
103                    var studentitem=xmlhttp2.responseText;
104                    alert(xmlhttp2.responseText);
105                    if(studentitem !="")
106                    {
107                        var allArry=studentitem.split(",");
108                        
109                        for(var i=1;i<allArry.length;i++)
110                        {
111                            var thisArry=allArry[i].split("|");
112                            document.getElementById("ddlStudent").options.add(new Option(thisArry[1].toString(),thisArry[0].toString())); 
113                        } 
114                    }
115               }
116               else
117               {
118                    alert("网络失败");
119               } 
120            }
121        }
122        
123        xmlhttp2.open("GET","selectStudent.aspx?classnumber="+classnumber,false);
124        xmlhttp2.send(null);    
125   }
126</script>
127<body>
128    <form id="form1" runat="server">
129    <div>
130        <asp:Label ID="Label1" runat="server" Text="年级"></asp:Label>
131        <asp:DropDownList ID="ddlGrade" runat="server">
132        </asp:DropDownList>
133        <asp:Label ID="Label2" runat="server" Text="班级"></asp:Label>
134        <asp:DropDownList ID="ddlClass" runat="server">
135        </asp:DropDownList>
136        <asp:Label ID="Label3" runat="server" Text="姓名"></asp:Label>
137        <asp:DropDownList ID="ddlStudent" runat="server">
138        </asp:DropDownList></div>
139    </form>
140</body>
141</html>
142

　
   后台代码：
  1using System;
  2using System.Data;
  3using System.Configuration;
  4using System.Collections;
  5using System.Web;
  6using System.Web.Security;
  7using System.Web.UI;
  8using System.Web.UI.WebControls;
  9using System.Web.UI.WebControls.WebParts;
 10using System.Web.UI.HtmlControls;
 11using System.Data.OracleClient;
 12
 13public partial class selectStudent : System.Web.UI.Page
 14{
 15    protected void Page_Load(object sender, EventArgs e)
 16    {
 17        if (!IsPostBack)
 18        {
 19            if (Request["gradenumber"] != null)
 20            {
 21                getgradenumber() ;
 22            }
 23            if (Request["classnumber"] != null)
 24            {
 25                getclassnumber();
 26            }
 27            else
 28            {
 29                loaddata();
 30            }
 31        }
 32    }
 33
 34    private void loaddata()
 35    {
 36        dataBindGrade();
 37        dataBindClass(Convert.ToInt32(this.ddlGrade.SelectedValue.ToString()));
 38        dataBindStudent(Convert.ToInt32(this.ddlClass.SelectedValue.ToString()));
 39
 40        this.ddlGrade.Attributes["onchange"] = "loadclass()";
 41        this.ddlClass.Attributes["onchange"] = "loadstudent()";
 42    }
 43
 44    private void getgradenumber()
 45    {
 46        int gradenumber = Convert.ToInt32(Request["gradenumber"].ToString());
 47        string str = "select *from SchoolClass where GradeNumber=" + gradenumber;
 48        OracleConnection con=retuncon();
 49        con.Open();
 50        OracleDataAdapter oda = new OracleDataAdapter(str, con);
 51        DataSet ds = new DataSet();
 52        oda.Fill(ds);
 53        DataTable dt = ds.Tables[0];
 54        string returnstr = "";
 55        
 56        foreach(DataRow dr in dt.Rows)
 57        {
 58            returnstr += "," + dr["ClassNumber"].ToString() + "|" + dr["ClassName"].ToString();
 59        }
 60
 61        con.Close();
 62        Response.Write(returnstr);
 63        Response.Flush();
 64        Response.End();
 65    }
 66
 67    private void getclassnumber()
 68    {
 69        int classnumber = Convert.ToInt32(Request["classnumber"].ToString());
 70        string str = "select *from SchoolStudent where classnumber=" + classnumber;
 71        OracleConnection con = retuncon();
 72        con.Open();
 73        OracleDataAdapter oda = new OracleDataAdapter(str, con);
 74        DataSet ds = new DataSet();
 75        oda.Fill(ds);
 76
 77        DataTable dt = ds.Tables[0];
 78        string returnstr = "";
 79
 80        foreach (DataRow dr in dt.Rows)
 81        {
 82            returnstr += "," + dr["StudentNumber"].ToString() + "|" + dr["StudentName"].ToString();
 83        }
 84        
 85        con.Close();
 86        Response.Write(returnstr);
 87        Response.Flush();
 88        Response.End();
 89
 90        
 91    }
 92
 93    private void dataBindGrade()
 94    {
 95        OracleConnection con = retuncon();
 96        con.Open();
 97        OracleDataAdapter oda = new OracleDataAdapter("select *from SchoolGrade", con);
 98        DataSet ds = new DataSet();
 99        oda.Fill(ds);
100        this.ddlGrade.DataSource = ds;
101        this.ddlGrade.DataValueField = "GradeNumber";
102        this.ddlGrade.DataTextField = "GradeName";
103        this.ddlGrade.DataBind();
104        con.Close();
105    }
106
107    private void dataBindClass(int gradenumber)
108    {
109        OracleConnection con = retuncon();
110        con.Open();
111        OracleDataAdapter oda = new OracleDataAdapter("select *from SchoolClass where GradeNumber="+gradenumber, con);
112        DataSet ds = new DataSet();
113        oda.Fill(ds);
114        this.ddlClass.DataSource = ds;
115        this.ddlClass.DataValueField = "ClassNumber";
116        this.ddlClass.DataTextField = "ClassName";
117        this.ddlClass.DataBind();
118        con.Close();
119    }
120
121    private void dataBindStudent(int classnumber)
122    {
123        OracleConnection con = retuncon();
124        con.Open();
125        OracleDataAdapter oda = new OracleDataAdapter("select *from SchoolStudent where ClassNumber=" +classnumber, con);
126        DataSet ds = new DataSet();
127        oda.Fill(ds);
128        this.ddlStudent.DataSource = ds;
129        this.ddlStudent.DataValueField = "StudentNumber";
130        this.ddlStudent.DataTextField = "StudentName";
131        this.ddlStudent.DataBind();
132        con.Close();
133    }
134
135    
136    public OracleConnection retuncon()
137    {
138        OracleConnection con = new OracleConnection("data source=wtszcc;User Id=wangtanps;Password=wtszcc");
139        return con;
140    }
141}
142