首页 | 源码下载 | 网站模板 | 网页特效 | 广告代码 | 网页素材 | 字体下载 | 书库 | 站长工具
会员投稿 投稿指南 RSS订阅

栏目导航

热点推荐

阅览排行

当前位置：主页>网络编程>ajax教程>资讯:Ajax简单示例之改变下拉框动态生成表格

Ajax简单示例之改变下拉框动态生成表格

www.jz123.cn  2008-09-21   来源:   中国建站    袁袁整理    我要投递新闻

1.建立一个aspx页面，html代码
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
        var xmlHttp;

        function createXMLHttpRequest()
        {
            if (window.ActiveXObject)
            {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else if (window.XMLHttpRequest)
            {
                xmlHttp = new XMLHttpRequest();
            }
        }
           
        function startRequest()
        {
            //debugger;
            var ProvinceID=document.getElementById("DropDownList1");          
            createXMLHttpRequest();
            xmlHttp.onreadystatechange = handleStateChange;
            xmlHttp.open("GET", "?ProvinceID="+ProvinceID.value, true);
            xmlHttp.send(null);
        }
           
        function handleStateChange()
        {
            if(xmlHttp.readyState == 4) //0(未初始化);1(正在装载);2 (装载完毕);3 (交互中);4 (完成)
            {
                if(xmlHttp.status == 200) //200(OK);404(not found)
                {
                    document.getElementById("gridiv").innerHTML=xmlHttp.responseText;
                }
            }
        }
        </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:DropDownList ID="DropDownList1" runat="server">
        </asp:DropDownList>  
    </div>
    <div id ="gridiv"></div>
    </form>
</body>
</html>2.cs代码
using System.Data.SqlClient;
protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            this.DropDownList1.Attributes.Add("onchange", "return startRequest();");
            ListProvince();
            if (ProvinceID != "")
            {
                GetCityByProvinceID(ProvinceID);
            }
        }
    }

    property#region property
    private string ProvinceID

上一页12 3 下一页

上一篇：AJAX支持的自动填充表单 下一篇：Ajax实现DataGrid/DataList动态ToolTip

相关文章列表

评论总数：2 条 [ 查看全部 ] 网友评论