jquery实现页面局部刷新

最新推荐文章于 2021-11-28 19:14:02 发布

努力去分享的老程序猿

最新推荐文章于 2021-11-28 19:14:02 发布

阅读量487

点赞数

分类专栏： JQuery 文章标签： jquery xmlhttprequest function java ajax email

JQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

    Java代码   
    
  
 <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="修改" οnclick="getOtherMessage();" />  
         <input type="text" id="email" />  
         <span id="emailTip"></span>  
         <div id="view">  
             456  
         </div>  
     </body>  
 </html>  

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

    Java代码   
    
  
 <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="修改" οnclick="getOtherMessage();" />  
         <div id="view">  
             456  
         </div>  
     </body>  
 </html>  