`
evan0625
  • 浏览: 159459 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery实现页面局部刷新

    博客分类:
  • js
阅读更多

后台管理中总是使用frameset进行分成部分进行管理,但是感觉很不好用,尤其是页面间调转还要判断window.parent,太令我费神了,于是学习使用XMLHttpRequest进行页面局部刷新。代码如下:

<html>
	<head>
		<script type="text/javascript"> 
     		window.onload = function(){ 
     		document.getElementById("email").onblur = function(){ 
         		if(window.XMLHttpRequest){ 
            		http_request = new XMLHttpRequest(); 
             		if(http_request.overrideMimeType){
                	http_request.overrideMimeType("text/xml"); 
					} 
      			}else if(window.ActiveXObject){ 
					try{ 
           				http_request = new ActiveXObject("Msxml2.XMLHTTP"); 
					}catch(e){ 
	  					try{    
	  						http_request = new ActiveXObject("Microsoft.XMLHTTP"); 
	  					}catch(e){} 
					} 
      			} 
      			if(!http_request){ 
					window.alert("不能创建XMLHttpRequest对象实例!"); 
					return false; 
      			} 
     			http_request.onreadystatechange = function(){ 
        			if(http_request.readyState == 4 && 
           				http_request.status == 200) { 
           				document.getElementById("emailTip").innerHTML 
            			=http_request.responseText; 
          			} 
				}; 
				http_request.open("GET", "email.jsp?email="+this.value, true); 
				http_request.send(null); 
      			} 
    		} 
  </script>
	</head>
	<body>
		<input type="button" value="修改" onclick="getOtherMessage();" />
		<input type="text" id="email" />
		<span id="emailTip"></span>
		<div id="view">
			456
		</div>
	</body>
</html>

 

后经高手提醒,可以使用ajax技术来写,使用jquery很简单,示例如下:

<html>
	<head>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript"> 
      	function getOtherMessage(){ 
			$.ajax({ 
				type:"post",   
          		url:"${pageContext.request.contextPath}/getOtherMessage.do", 
				success:function(msg){ 
   					$("#view").html(msg); 
				}, 
				error:function(){ 
  					alert("wrong"); 
				} 
			}); 
       } 
  </script>
	</head>
	<body>
		<input type="button" value="修改" onclick="getOtherMessage();" />
		<div id="view">
			456
		</div>
	</body>
</html>

 

 

分享到:
评论
2 楼 evan0625 2012-01-17  
animo_itey 写道
  你这个刷新是个啥意思阿 ?
这里为什么getOtherMessage.do要.do?

这个是指页面局部刷新,getOtherMessage.do要.do指的是一种请求,该请求返回的信息将在<div id="view"> 下显示。
1 楼 animo_itey 2012-01-10  
  你这个刷新是个啥意思阿 ?
这里为什么getOtherMessage.do要.do?

相关推荐

    jquery实现的局部刷新聊天室

    【jQuery实现的局部刷新聊天室】是一个利用JavaScript库jQuery构建的实时通信系统,它通过Ajax技术实现了页面的无刷新更新,提供了丰富的用户体验。聊天室功能包括发送消息、接收消息、显示在线用户列表以及表情功能...

    jQuery+ajax实现局部刷新的两种方法

    本文将介绍使用jQuery和ajax来实现页面局部刷新的两种方法。对于jQuery,它是一个快速、小巧、功能丰富的JavaScript库,通过它可以轻松操作DOM,而ajax允许我们实现无需重新加载整个页面就可以更新网页的部分内容。 ...

    Struts2+jQuery(不用JSON)实现局部刷新

    3. **局部刷新实现**: 局部刷新是AJAX的核心特性,它允许只更新页面的一部分而不是整个页面。在Struts2中,我们可以创建一个Action,该Action负责处理特定的请求并返回需要更新的数据。然后,使用jQuery的AJAX方法...

    jquery实现Ajax定时局部页面刷新

    通过以上步骤,我们可以轻松地使用jQuery和AJAX技术实现页面局部的定时刷新功能。这种方法不仅提高了用户体验,还可以有效减少服务器的压力,因为只需要发送和接收必要的数据,而不是整个页面。此外,开发者还可以...

    jquery .ajax 局部刷新之后 js无法调用问题解决

    综上所述,解决`.ajax`局部刷新后js无法调用的问题,关键在于理解DOM更新、作用域、事件绑定和页面生命周期等概念,并根据实际情况采取相应的调整策略。通过以上方法,我们可以确保JavaScript代码在局部刷新后依然...

    20120102 NET+jQuery 实现局部刷新+分页+高亮显示搜索内容

    标题中的“20120102 NET+jQuery 实现局部刷新+分页+高亮显示搜索内容”指的是一个基于.NET技术和jQuery库的Web应用示例,它着重展示了如何在网页中实现以下功能: 1. **局部刷新(Ajax)**:在不重新加载整个页面的...

    jQuery 局部div刷新和全局刷新方法总结

    在Web开发中,页面局部刷新和全局刷新是两种常见的功能实现。局部刷新指的是仅更新页面的一部分内容,而无需重新加载整个页面;全局刷新则是指重新加载整个页面。jQuery作为一个广泛使用的JavaScript库,提供了简单...

    jQuery实现AJAX定时刷新局部页面实例

    局部刷新我们讲述到最多的是ajax 了,当然也可以不使用ajax来刷新页面了,我们可以使用jquery中的append来给指定内容加东西了,当然最实用的还是ajax加载数据了。 例子,定时局部刷新 定时局部刷新用到jQuery里面的...

    JQuery实现动态菜单以及刷新局部页面实例

    通过以上步骤,我们可以利用jQuery实现一个动态菜单系统,并且当用户点击菜单项时,能够局部刷新页面内容。这不仅提高了页面的响应速度,也使得用户界面更加友好。在实际项目中,根据需求,还可以进一步优化,例如...

    基于AdminLTE(bootstrap)用JS实现的局部刷新的案例

    这个案例是关于如何在基于AdminLTE和Bootstrap的项目中,利用JavaScript实现页面的局部刷新功能。AdminLTE是一款流行的后台管理界面框架,它基于Bootstrap构建,提供了丰富的组件和预设样式,使得开发者能够快速搭建...

    jquery控制页面部分刷新的方法

    jQuery作为一个功能强大的JavaScript库,为我们提供了便捷的方法来实现页面部分刷新的功能,而其中的load方法就是实现这一功能的利器。 首先,我们要了解jQuery的load方法,它是用来从服务器加载数据,并把加载的...

    iframe实现页面局部刷新操作

    `iframe`是一种HTML元素,它可以在一个网页中嵌入另一个网页,使得我们可以在独立的框架内加载和显示内容,从而实现局部刷新的效果。在本案例中,我们将讨论如何利用`iframe`来实现图片的上传和无刷新展示,以及涉及...

    关于页面局部刷新例程

    在网页设计和开发中,局部刷新是一项至关重要的技术,它能提升用户体验,使得...通过了解和实践Ajax、JavaScript库、Web组件框架以及性能优化策略,我们可以更好地实现页面局部刷新例程,满足用户对快速交互的需求。

    jQuery实现AJAX定时刷新局部和全部页面实例(附jQuery1.2到最新3.3.1所有版本下载)

     局部刷新我们讲述到最多的是ajax 了,当然也可以不使用ajax来刷新页面了,我们可以使用jquery中的append来给指定内容加东西了,当然最实用的还是ajax加载数据了。 例一(定时局部刷新) 定时局部刷新用

    Jquery实例2:可收缩展开的级联菜单与局部刷新

    本实例"Jquery实例2:可收缩展开的级联菜单与局部刷新"聚焦于利用jQuery实现动态交互效果,特别是创建可折叠的级联菜单和页面的局部刷新功能。这些功能在现代网页设计中极为常见,可以提升用户体验,使网站更加直观...

    基于AdminLTE(bootstrap)用iframe实现的局部刷新的案例

    本案例主要探讨如何基于AdminLTE(一个基于Bootstrap的开源后台主题)利用iframe和JavaScript实现局部刷新功能,以提升用户体验。 AdminLTE是一个免费的响应式后台模板,其设计灵感来源于Twitter的Bootstrap框架,...

    jquery实现购物车无刷新操作

    6. **局部刷新**:使用`$.load()`方法,可以只更新页面的某一部分,而不是整个页面。例如,如果购物车显示在一个侧边栏,可以只刷新该区域: ```javascript $("#cartContainer").load("/cart #cartContent"); ```...

    jquery ajax 分页 局部刷新 mysql数据库

    本教程将探讨如何使用jQuery的AJAX功能实现页面局部刷新,同时结合MySQL数据库和Struts2框架实现高效的分页功能。 首先,jQuery AJAX是JavaScript库jQuery提供的一种异步数据通信方式,它允许我们在不刷新整个页面...

    实现局部刷新的功能

    代码时从网上看到的,但是整合这个代码花了我一下午的世界,不错的资源,只是一个简单的实现刷新,struts2+jquery+ajax实现局部刷新的功能,这是一个完整的项目,直接导入到Myeclipse当中就能运行

Global site tag (gtag.js) - Google Analytics