让web应用实现无刷新数据交互-基于iframe实现

 1、新建两个web页面,mainpage和innerpage

2、mainpage中添加<iframe>标签 其属性src设置为innerpage,再搞一个图片img在iframe之外

       mainpage页面代码:

<head runat="server">
    <title>无标题页</title>
</head>
<body>
    <form id="form1" runat="server">
    <iframe src="innerpage.aspx" frameborder="0"></iframe>
    <div>
        <input id="Text1" type="text" />
    </div>
    <div>
        <img src="IMG_2445.jpg" /></div>
    </form>
</body>

3、innerpage中加入label控件,加入js代码周期提交到后台,后台写代码更新label为一个后台产生的随机数

 

    innerpage页面代码

<head  >
    <title>无标题页</title>
   <script  language ="javascript" >
function clockon(){//在页面load时设一个定时器,定时器响应函数为getTime,定时器定为5秒触发一次该函数

var timer=setTimeout("getTime()",5000);

}

function getTime(){//定时器到时则触发提交页面

form1.submit();
}

</script>
</head>
<body οnlοad="clockon();" >
    <form id="form1" runat="server" >

    <div>
       自动刷新获得服务器产生的随机数</div>
       <div><asp:Label ID="Label1" runat="server" Text=""></asp:Label>
         </div>       
        </form>
</body>

 

innerpage后台代码

 protected void Page_Load(object sender, EventArgs e)
    {                      
         System.Random myrand = new Random(System.DateTime.Now.Millisecond);
        this.Label1.Text = Convert.ToString(myrand.Next());      
    }

4、利用框架标签iframe,大页面套小页面,小页面周期更新,大页面的其他部分(图片)不会刷新

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值