jquery实现页面局部刷新

最新推荐文章于 2023-11-03 18:31:54 发布

最新推荐文章于 2023-11-03 18:31:54 发布 · 209 阅读

文章标签：

#XML #JSP #Ajax #jQuery #局部刷新 #ViewUI

js 专栏收录该内容

3 篇文章

订阅专栏

后台管理中总是使用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>