asp.net中调用数据库+ajax=实现无刷新二级联动菜单

最新推荐文章于 2017-12-14 12:55:00 发布

zx_values

最新推荐文章于 2017-12-14 12:55:00 发布

阅读量208

点赞数

分类专栏：新技术文章标签： asp.net ajax 数据库 xmlhttprequest dataset 浏览器

本文链接：https://blog.csdn.net/zx_values/article/details/5490534

版权

新技术专栏收录该内容

5 篇文章 0 订阅

订阅专栏

页面代码：

<head runat="server">
    <title>无刷新二级联动菜单</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:DropDownList ID="DropDownList1" runat="server" DataTextField="province" DataValueField="id">
        </asp:DropDownList>
        <asp:DropDownList ID="DropDownList2" runat="server">
        </asp:DropDownList>
    </div>
    </form>
</body>
<script language="javascript" type="text/javascript">
document.body.οnlοad=function()
{
   document.getElementById("DropDownList2").options[0]=new Option("请先选择省份","");
}
    function send_request()
    {
          //XmlHttpRequest并不是一个标准的产物，而是微软最初提出并得到很多浏览器支持的对象，因此其创建方法也是因浏览器而异的
          //创建XmlHttpRequest对象
          http_request=false;
          if(window.XmlHttpRequest)
          {
                 //非IE浏览器
                 http_request=new XMLHttpRequest();
          }
          else if(window.ActiveXObject)
          {
                 //微软IE浏览器
                 try
                 {
                       //较新版本的IE浏览器
                       http_request=new ActiveXObject("Msxml2.XMLHTTP");
                 }
                 catch(e)
                 {
                       try
                       {
                         http_request=new ActiveXObject("Mircosoft.XMLHTTP");
                       }
                       catch(e)
                       {}
                 }
          }
          else
          {
                window.alert("你的浏览器版本已经严重过时，请升级后早做操作！");
                return false;
          }
          //readyState属性表示XMLHTTP的请求的当前状态，它等于4时表示请求已完成。
          //onreadystatechange表示XMLHttpRequest对象中readyState改变时触发这个事件。
          http_request.onreadystatechange=Getcity;
          //创建htpp请求
          //open方法表示打开一个URL连接
          http_request.open("get","GetCity.ashx?ProvinceType="+document.getElementById('DropDownList1').value,true);
          //发送上面创建的http请求
          http_request.send(null);
    }
    function Getcity()
    {
        if(http_request.readyState==4)//请求完成，发送成功
        {
            //status属性表示HTTP请求的返回状态码，因为XMLHTTP也是请求的一个网页，所以它的含义和传统网页相同，如：200表示正常返回；404表示找不到网页；500表示服务器内部错误。
            if(http_request.status==200)//交易成功
            {
                //在请求正常完成后，responseText表示以文本形式返回请求页面的内容
                 if(http_request.responseText!="")
                 {
                     //new Array(7),可以把7改成一个尽可能大的值，不如说选项中最大的值
                     var myarr=new Array(7);
                     var ResponseText=http_request.responseText;
                     var pos=ResponseText.indexOf(";");
                     var i=0;
                     while(pos!=-1)
                     {
                       var myText=ResponseText.substring(0,pos);
                       if(myText!="")
                       {
                           myarr[i]=myText;
                           i++;
                       }
                       ResponseText=ResponseText.substr(pos+1);
                       pos=ResponseText.indexOf(";");
                       continue;
                     }
                     for(var n=0;n<i;n++)
                     document.getElementById("DropDownList2").options[n]=new Option(myarr[n],"");
                     document.getElementById("DropDownList2").length=i;
                 }
                 else
                 {
                     document.getElementById("DropDownList2").options[0]=new Option("请先选择省份","");
                     document.getElementById("DropDownList2").length=1;
                 }
            }
        }
    }
</script>
</html>

move.aspx.cs代码：
protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            SqlConnection sqlconn = new SqlConnection(ConfigurationManager.AppSettings["ConnStr"].ToString());
            SqlDataAdapter sda1 = new SqlDataAdapter("select * from province", sqlconn);
            DataSet myds1 = new DataSet();
            sda1.Fill(myds1);
            this.DropDownList1.DataSource = myds1.Tables[0];
            this.DropDownList1.DataBind();         this.DropDownList1.Attributes.Add("onchange", "send_request()");
        }
    }

GetCity.ashx代码：
public class GetCity : IHttpHandler {

    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        string CityResult = "";
        string type = context.Request.QueryString["ProvinceType"].ToString();
        SqlConnection sqlconn = new SqlConnection(ConfigurationManager.AppSettings["ConnStr"].ToString());
        sqlconn.Open();
        SqlCommand comm=new SqlCommand("select county from county where type="+type,sqlconn);
        SqlDataReader reader = comm.ExecuteReader();
        while(reader.Read())
        {
            CityResult += reader[0]+";";
        }
        context.Response.Write(CityResult);
        reader.Close();
    }

    public bool IsReusable {
        get {
            return false;
        }
    }
}

zx_values

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
asp.net中调用数据库+ajax=实现无刷新二级联动菜单

页面代码：无刷新二级联动菜单 document.body.onload=function(){ document.getElementById("DropDownList2").options[0]=new Option("请先选择省份","");} function send_r
复制链接

扫一扫