实现无刷新联动例子汇总
Iframe实现无刷新联动
iframe的无刷新其实是局部刷新，状态栏的滚动条还是会滚动，只是页面不会闪烁，这是一种比较老的技术了，在处理的数据两大的时候会比较慢，在本例中需要两个页面：index.aspx和frame.asapx,index.aspx用来显示界面，其中有一个iframe标记，指向frame.aspx页用来显示结果
index.aspx前台代码
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Index.aspx.cs"Inherits="_Default"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headid="Head1"runat="server">
<title>无标题页</title>
<scripttype="text/javascript">
functionQuery(){
varddlpro=document.getElementById('ddlPro');
varpro=ddlpro.options[ddlpro.selectedIndex].innerText;
if(pro!=""){
document.getElementById("iframe1").src="frame.aspx?Pro="+pro;
}
}
</script>
</head>
<body>
<formid="form2"runat="server">
<div>
<tableborder="1"cellpadding="3"cellspacing="0"width="600px">
<tr>
<tdcolspan="2"align="center">
Iframe实现局部刷新
</td>
</tr>
<tr>
<td>
省份名称:
</td>
<td>
<selectid="ddlPro"style="width:201px">
<optionvalue="湖北">湖北</option>
<optionvalue="河北">河北</option>
<optionvalue="广东">广东</option>
<optionvalue="河南">河南</option>
</select>
<inputid="Button3"type="button"value="查询"onclick="Query()"/>
</td>
</tr>
<tr>
<td>
显示城市列表
</td>
<td>
<iframesrc="frame.aspx"style="text-align:center"id="iframe1"width="100%"
height="100%"frameborder="0"scrolling="no"/>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
frame.aspx的前台代码：
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="frame.aspx.cs"Inherits="myframe"%> <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headid="Head1"runat="server"> <title>无标题页</title> </head> <body> <formid="form2"runat="server"> <div> <asp:DropDownListID="ddlCity"runat="server"Width="179px"> </asp:DropDownList> </div> </form> </body> </html>
frame.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;
publicpartialclassmyframe:System.Web.UI.Page
{
protectedvoidPage_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="index.aspx.cs"Inherits="jacascript_Default"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headid="Head1"runat="server">
<title>无标题页</title>
<scripttype="text/javascript">
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;
}
}
}
</script>
</head>
<body>
<formid="form2"runat="server">
<div>
<tablewidth="700px"border="1"cellpadding="5"cellspacing="0">
<tr>
<tdcolspan="2"align="center">
脚本方法实现刷新
</td>
</tr>
<tr>
<td>
选择省份:
</td>
<td>
<selectid="ddlPro"style="width:201px">
<optionvalue="湖北">湖北</option>
<optionvalue="河北">河北</option>
<optionvalue="广东">广东</option>
<optionvalue="河南">河南</option>
</select>
<inputid="btnQuery"type="button"value="查询"onclick="City()"/>
</td>
</tr>
<tr>
<td>
城市:
</td>
<td>
<asp:DropDownListID="ddlCity"runat="server"Width="201px">
</asp:DropDownList>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
后台代码：
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;
publicpartialclassjacascript_Default:System.Web.UI.Page
{
protectedvoidPage_Load(objectsender,EventArgse)
{
StringBuildermyscript=newStringBuilder();
myscript.Append("functionCity(){\n");
myscript.Append("varddlpro=document.getElementById('ddlPro');\n");
myscript.Append("varpro=ddlpro.options[ddlpro.selectedIndex].innerText;\n");
//myscript.Append("varpro=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);
}
privatestringGetCityStr(stringpro)
{
stringcity="";
switch(pro)
{
case"湖北":
city="武汉,黄冈,黄石,襄樊";
break;
case"河北":
city="石家庄,唐山,承德,邯郸";
break;
case"广东":
city="广州,佛山,深圳,珠海";
break;
case"河南":
city="郑州,新乡,安阳,信阳";
break;
}
returncity;
}
}
CallBack无刷新联动
前台代码：
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="index.aspx.cs"Inherits="callback_Default"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headid="Head1"runat="server">
<title>无标题页</title>
<scripttype="text/javascript">
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;
}
}
}
</script>
</head>
<body>
<formid="form2"runat="server">
<div>
<tablewidth="700px"border="1"cellpadding="5"cellspacing="0">
<tr>
<tdcolspan="2"align="center">
callback方法实现刷新
</td>
</tr>
<tr>
<td>
选择省份:
</td>
<td>
<selectid="ddlPro"style="width:200px">
<optionvalue="湖北">湖北</option>
<optionvalue="河北">河北</option>
<optionvalue="广东">广东</option>
<optionvalue="河南">河南</option>
</select>
<inputid="btnQuery"type="button"value="查询"onclick="FillData()"/>
</td>
</tr>
<tr>
<td>
城市:
</td>
<td>
<asp:DropDownListID="ddlCity"runat="server"Width="201px">
</asp:DropDownList>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
后台代码：
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;
publicpartialclasscallback_Default:System.Web.UI.Page,ICallbackEventHandler
{
privatestring_data;
protectedvoidPage_Load(objectsender,EventArgse)
{
}
ICallbackEventHandler成员
}
Ajax无刷新联动
该例子也要用到两个页面：oec203index.aspx和datapage.aspx.datapage.aspx主要用来回送要显示的数据
.aspx页面前台代码：
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="index.aspx.cs"Inherits="ajax_Default"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headid="Head1"runat="server">
<title>无标题页</title>
<scripttype="text/javascript">
varxmlhttp;
functiongetData(){
varddlpro=document.getElementById("ddlPro");
varpro=ddlpro.options[ddlpro.selectedIndex].innerText;
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange=statechange;
xmlhttp.Open("GET","datapage.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;
}
}
}
</script>
</head>
<body>
<formid="form2"runat="server">
<div>
<tablewidth="700px"border="1"cellpadding="5"cellspacing="0">
<tr>
<tdcolspan="2"align="center">
ajax方法实现刷新
</td>
</tr>
<tr>
<td>
选择省份:
</td>
<td>
<selectid="ddlPro"style="width:201px">
<optionvalue="湖北">湖北</option>
<optionvalue="河北">河北</option>
<optionvalue="广东">广东</option>
<optionvalue="河南">河南</option>
</select>
<inputid="btnQuery"type="button"value="查询"onclick="getData()"/>
</td>
</tr>
<tr>
<td>
城市:
</td>
<td>
<asp:DropDownListID="ddlCity"runat="server"Width="201px">
</asp:DropDownList>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
datapage.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;
publicpartialclassajax_datapage:System.Web.UI.Page
{
protectedvoidPage_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;
}
}
}
以上所述就是本文的全部内容了，希望大家能够喜欢。