实现无刷新联动例子汇总

2024-05-06 14:41:38

字体：大中小

来源：转载

供稿：网友

Iframe实现无刷新联动

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

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server">  <title>无标题页</title>  <script type="text/javascript">    function Query() {      var ddlpro = document.getElementById('ddlPro');      var pro = ddlpro.options[ddlpro.selectedIndex].innerText;      if (pro != "") {        document.getElementById("iframe1").src = "frame.aspx?Pro=" + pro;      }    }  </script></head><body>  <form id="form2" runat="server">  <div>    <table border="1" cellpadding="3" cellspacing="0" width="600px">      <tr>        <td colspan="2" align="center">          Iframe实现局部刷新        </td>      </tr>      <tr>        <td>          省份名称:        </td>        <td>          <select id="ddlPro" style="width: 201px">            <option value="湖北">湖北</option>            <option value="河北">河北</option>            <option value="广东">广东</option>            <option value="河南">河南</option>          </select>          <input id="Button3" type="button" value="查询" onclick="Query()" />        </td>      </tr>      <tr>        <td>          显示城市列表        </td>        <td>          <iframe src="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的前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="frame.aspx.cs" Inherits="myframe" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server">  <title>无标题页</title></head><body>  <form id="form2" runat="server">  <div>    <asp:DropDownList ID="ddlCity" runat="server" Width="179px">    </asp:DropDownList>  </div>  </form></body></html>

frame.aspx后台代码：

上一篇：Jquery实现动态切换图片的方法

下一篇：Jquery中基本选择器用法实例详解