几个不同类型无刷新联动例子

Iframe实现无刷新联动

iframe的无刷新其实是局部刷新，状态栏的滚动条还是会滚动，只是页面不会闪烁，这是一种比较老的技术了，在处理的数据两大的时候会比较慢，在本例中需要两个页面：oec2003index.aspx和oec2003frame.asapx,oec2003index.aspx用来显示界面，其中有一个iframe标记，指向oec2003frame.aspx页用来显示结果

网站建设哪家好，找成都创新互联！专注于网页设计、网站建设、微信开发、微信小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了点军免费建站欢迎大家使用！

oec2003index.aspx前台代码

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="oec2003Index.aspx.cs"Inherits="_Default"%>



    无标题页

    
        functionQuery() {
            varddlpro = document.getElementById('ddlPro');
            varpro = ddlpro.options[ddlpro.selectedIndex].innerText;
            if(pro != "") {
                document.getElementById("iframe1").src = "oec2003frame.aspx?Pro="+ pro;
            }
        }

    



    
    
        
            
                
           Iframe实现局部刷新
                
            
            
                
           省份名称:
                
                
                    
                        湖北
                        河北
                        广东
                        河南
                    
                    
                
            
            
                
           显示城市列表

oec2003frame.aspx的前台代码：

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="oec2003frame.aspx.cs"Inherits="myframe"%>



    无标题页

oec2003frame.aspx后台代码：

usingSystem;
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Collections;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls;

public partial classmyframe: System.Web.UI.Page{
    protected voidPage_Load(objectsender, EventArgse)
    {
        stringpro = Request.QueryString["pro"];
        switch(pro)
        {
            case"湖北":
                this.ddlCity.Items.Clear();
                this.ddlCity.Items.Add("武汉");
                this.ddlCity.Items.Add("黄冈");
                this.ddlCity.Items.Add("黄石");
                this.ddlCity.Items.Add("襄樊");
                break;
            case"河北":
                this.ddlCity.Items.Clear();
                this.ddlCity.Items.Add("石家庄");
                this.ddlCity.Items.Add("唐山");
                this.ddlCity.Items.Add("承德");
                this.ddlCity.Items.Add("邯郸");
                break;
            case"广东":
                this.ddlCity.Items.Clear();
                this.ddlCity.Items.Add("广州");
                this.ddlCity.Items.Add("佛山");
                this.ddlCity.Items.Add("深圳");
                this.ddlCity.Items.Add("珠海");
                break;
            case"河南":
                this.ddlCity.Items.Clear();
                this.ddlCity.Items.Add("郑州");
                this.ddlCity.Items.Add("新乡");
                this.ddlCity.Items.Add("安阳");
                this.ddlCity.Items.Add("信阳");
                break;

        }
    }
}

Javascript无刷新联动

前台页面代码：

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="oec2003index.aspx.cs"
Inherits="jacascript_Default"%>



    无标题页

    
        functionFillData(strcity) {

            document.getElementById("ddlCity").options.length = 0;
            varindexofcity;
            varcity;
            while(strcity.length > 0) {
                indexofcity = strcity.indexOf(",");
                if(indexofcity > 0) {
                    city = strcity.substring(0, indexofcity);

                    strcity = strcity.substring(indexofcity + 1);
                    document.getElementById("ddlCity").add(newOption(city, city));
                }
                else{
                    document.getElementById("ddlCity").add(newOption(strcity, strcity));
                    break;
                }

            }
        }
    



    
    
        
            
                
           脚本方法实现刷新
                
            
            
                
           选择省份:
                
                
                    
                        湖北
                        河北
                        广东
                        河南
                    
                    
                
            
            
                
           城市:

后台代码：

usingSystem;
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Collections;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls;
usingSystem.Text;

public partial classjacascript_Default: System.Web.UI.Page{
    protected voidPage_Load(objectsender, EventArgse)
    {
        StringBuildermyscript = newStringBuilder();
        myscript.Append("function City() {\n");
        myscript.Append("var ddlpro=document.getElementById('ddlPro');\n");
        myscript.Append("var pro=ddlpro.options[ddlpro.selectedIndex].innerText;\n");
        //myscript.Append("var pro=document.getElementById('txtPro').value;\n");
myscript.Append("switch(pro) { \n");
        myscript.Append("case '湖北':\n");
        myscript.Append("FillData('"+ GetCityStr("湖北") + "');\n");
        myscript.Append("break;\n");
        myscript.Append("case '河北':\n");
        myscript.Append("FillData('"+ GetCityStr("河北") + "');\n");
        myscript.Append("break;\n");
        myscript.Append("case '广东':\n");
        myscript.Append("FillData('"+ GetCityStr("广东") + "');\n");
        myscript.Append("break;\n");
        myscript.Append("case '河南':\n");
        myscript.Append("FillData('"+ GetCityStr("河南") + "');\n");
        myscript.Append("break;}\n");
        myscript.Append("}\n");

        Page.ClientScript.RegisterClientScriptBlock(typeof(string), "city", myscript.ToString(), true);

    }

    private stringGetCityStr(stringpro)
    {
        stringcity = "";
        switch(pro)
        {
            case"湖北":
                city = "武汉,黄冈,黄石,襄樊";
                break;
            case"河北":
                city = "石家庄,唐山,承德,邯郸";
                break;
            case"广东":
                city = "广州,佛山,深圳,珠海";
                break;
            case"河南":
                city = "郑州,新乡,安阳,信阳";
                break;
        }
        returncity;
    }
}

CallBack无刷新联动

前台代码：

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="oec2003index.aspx.cs"Inherits="callback_Default"%>



    无标题页

    
         functionFillData()
         {
             varddlpro=document.getElementById('ddlPro');
             varpro=ddlpro.options[ddlpro.selectedIndex].value;
             <% =ClientScript.GetCallbackEventReference(this,"pro","FillDll",null) %>
         } 

        functionFillDll(strcity)
        {
            document.getElementById("ddlCity").options.length=0;
            varindexofcity;
            varcity;
            while(strcity.length>0)
            {
                indexofcity=strcity.indexOf(",");
                if(indexofcity>0)
                {
                    city=strcity.substring(0,indexofcity);
                    strcity=strcity.substring(indexofcity+1);
                    document.getElementById("ddlCity").add(newOption(city,city));
                }
                else
       {
                    document.getElementById("ddlCity").add(newOption(strcity,strcity));
                    break;
                }
            }
        }
    



    
    
        
            
                
           callback方法实现刷新
                
            
            
                
           选择省份:
                
                
                    
                        湖北
                        河北
                        广东
                        河南
                    
                    
                
            
            
                
           城市:

后台代码：

usingSystem;
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Collections;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls; 

public partial classcallback_Default: System.Web.UI.Page,ICallbackEventHandler{
 private string_data;
 protected voidPage_Load(objectsender, EventArgse)
 { 

 } 

 //ICallbackEventHandler 成员}

Ajax无刷新联动

该例子也要用到两个页面：oec203index.aspx和oec2003datapage.aspx. oec2003datapage.aspx主要用来回送要显示的数据

oec2003.aspx页面前台代码：

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="oec2003index.aspx.cs"Inherits="ajax_Default"%>



    无标题页

    
        varxmlhttp;
        functiongetData() {
            varddlpro = document.getElementById("ddlPro");
            varpro = ddlpro.options[ddlpro.selectedIndex].innerText;
            xmlhttp = newActiveXObject("Microsoft.XMLHTTP");
            xmlhttp.onreadystatechange = statechange;
            xmlhttp.Open("GET", "oec2003datapage.aspx?pro="+ pro, true);
            xmlhttp.Send();
        }

        functionstatechange() {
            if(xmlhttp.readystate == 4) {
                if(xmlhttp.status == 200) {
                    FillData(xmlhttp.responseText);
                }
            }
        }
        functionFillData(strcity) {
            document.getElementById("ddlCity").options.length = 0;
            varindexofcity;
            varcity;
            while(strcity.length > 0) {
                indexofcity = strcity.indexOf(",");
                if(indexofcity > 0) {
                    city = strcity.substring(0, indexofcity);
                    strcity = strcity.substring(indexofcity + 1);
                    document.getElementById("ddlCity").add(newOption(city, city));
                }
                else{
                    document.getElementById("ddlCity").add(newOption(strcity, strcity));
                    break;
                }
            }
        }
    



    
    
        
            
                
           ajax方法实现刷新
                
            
            
                
           选择省份:
                
                
                    
                        湖北
                        河北
                        广东
                        河南
                    
                    
                
            
            
                
           城市:

oec2003datapage.aspx后台代码：

usingSystem;
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Collections;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls;

public partial classajax_datapage: System.Web.UI.Page{
    protected voidPage_Load(objectsender, EventArgse)
    {
        stringpro = Request.QueryString["pro"];
        Response.Clear();
        switch(pro)
        {
            case"湖北":
                Response.Write("武汉,黄冈,黄石,襄樊");
                break;
            case"河北":
                Response.Write("石家庄,唐山,承德,邯郸");
                break;
            case"广东":
                Response.Write("广州,佛山,深圳,珠海");
                break;
            case"河南":
                Response.Write("郑州,新乡,安阳,信阳");
                break;
        }
    }
}

名称栏目：几个不同类型无刷新联动例子
转载来源：http://cqcxhl.cn/article/gpdieo.html

重庆分公司，新征程启航

几个不同类型无刷新联动例子

Iframe实现无刷新联动

Javascript无刷新联动

CallBack无刷新联动

Ajax无刷新联动

其他资讯