jquery实现页面局部刷新

转载 2015年11月19日 12:17:00

http://evan0625.iteye.com/blog/617004

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

Java代码  收藏代码
  1. <html>  
  2.     <head>  
  3.         <script type="text/javascript">   
  4.             window.onload = function(){   
  5.             document.getElementById("email").onblur = function(){   
  6.                 if(window.XMLHttpRequest){   
  7.                     http_request = new XMLHttpRequest();   
  8.                     if(http_request.overrideMimeType){  
  9.                     http_request.overrideMimeType("text/xml");   
  10.                     }   
  11.                 }else if(window.ActiveXObject){   
  12.                     try{   
  13.                         http_request = new ActiveXObject("Msxml2.XMLHTTP");   
  14.                     }catch(e){   
  15.                         try{      
  16.                             http_request = new ActiveXObject("Microsoft.XMLHTTP");   
  17.                         }catch(e){}   
  18.                     }   
  19.                 }   
  20.                 if(!http_request){   
  21.                     window.alert("不能创建XMLHttpRequest对象实例!");   
  22.                     return false;   
  23.                 }   
  24.                 http_request.onreadystatechange = function(){   
  25.                     if(http_request.readyState == 4 &&   
  26.                         http_request.status == 200) {   
  27.                         document.getElementById("emailTip").innerHTML   
  28.                         =http_request.responseText;   
  29.                     }   
  30.                 };   
  31.                 http_request.open("GET""email.jsp?email="+this.value, true);   
  32.                 http_request.send(null);   
  33.                 }   
  34.             }   
  35.   </script>  
  36.     </head>  
  37.     <body>  
  38.         <input type="button" value="修改" onclick="getOtherMessage();" />  
  39.         <input type="text" id="email" />  
  40.         <span id="emailTip"></span>  
  41.         <div id="view">  
  42.             456  
  43.         </div>  
  44.     </body>  
  45. </html>  

 

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

Java代码  收藏代码
  1. <%@ page language="java" contentType="text/html; charset=utf-8" %>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  2. <html>  
  3.     <head>  
  4.         <script type="text/javascript" src="js/jquery.js"></script>  
  5.         <script type="text/javascript">   
  6.         function getOtherMessage(){   
  7.             $.ajax({   
  8.                 type:"post",     
  9.                 url:"${pageContext.request.contextPath}/getOtherMessage.do",   
  10.                 success:function(msg){   
  11.                     $("#view").html(msg);   
  12.                 },   
  13.                 error:function(){   
  14.                     alert("wrong");   
  15.                 }   
  16.             });   
  17.        }   
  18.   </script>  
  19.     </head>  
  20.     <body>  
  21.         <input type="button" value="修改" onclick="getOtherMessage();" />  
  22.         <div id="view">  
  23.             456  
  24.         </div>  
  25.     </body>  
  26. </html>  

Js控制页面刷新(局部刷新&全页面刷新)

$.get方法,$.post方法,$.getJson方法,$.ajax方法如下 前两种使用方法基本上一样 $.get(”Default.php”, {id:”1″, page: “2″ }, fu...
  • luckymaoyy
  • luckymaoyy
  • 2016年12月09日 15:36
  • 2509

HTML中使用Ajax进行局部刷新页面

使用Ajax进行用户名动态校验,局部刷新页面1.在HTML页面中使用js脚本将请求数据发送给后台servlet 由按钮触发事件 查询 由js脚本对将数据发送到后台 var req = new ...
  • u013360850
  • u013360850
  • 2016年10月09日 20:13
  • 20310

Js控制页面刷新(局部刷新&全页面刷新)

局部刷新: 这个方法就多了去了,常见的有以下几种;  $.get方法,$.post方法,$.getJson方法,$.ajax方法如下  前两种使用方法基本上一样  $.get(”Defa...
  • liuzx32
  • liuzx32
  • 2012年07月21日 13:42
  • 8748

web页面局部刷新问题

最近在项目中使用dwz,在一个页面中用select2做了一个2级级联的下拉框,问题是在查询参数回显的时候特别麻烦,于是想着,能不能页面提交的时候只刷新下面的数据表格,而不刷新查询栏,研究了一下dwz的...
  • u011630551
  • u011630551
  • 2016年03月19日 00:16
  • 3504

Ajax实现页面局部刷新

直接看代码吧!!!!!!!!! 页面中的js代码 //ajax局部加载页面 function sortInfo(id,type){ $.get('${base}/artGallery/ar...
  • u013126379
  • u013126379
  • 2016年09月19日 18:56
  • 2959

Html 页面 局部刷新方法

var int=self.setInterval("clock()",50) function clock() { var t=new Date() document.getElement...
  • qq_30469045
  • qq_30469045
  • 2016年07月09日 15:38
  • 5231

使用Jquery的局部刷新功能,实现菜单内容的动态切换

在以前的开发中,我们很喜欢使用iframe实现菜单内容的动态切换。但是iframe的可操作性、搜索上、与整体页面的配合上,存在着诸多问题。 现在我们可以使用成熟的jquery ajax技术实现菜单的...
  • simon_xu_sh
  • simon_xu_sh
  • 2016年10月27日 15:38
  • 4533

HTML页面局部刷新

A Click Event Test $(function(){ $("#div_test a").click(function()...
  • mengxianhua
  • mengxianhua
  • 2012年04月18日 14:44
  • 30955

JS AJAX实现页面局部刷新~~~~

http://apps.hi.baidu.com/share/detail/34363149 AJAX大家耳濡目染,它是个非常强大的东西。今天我就在这里写一些比较实在的东西,希望能够帮助到一些人...
  • IT_LOSER
  • IT_LOSER
  • 2016年11月10日 09:56
  • 4859

(局部刷新)jquery.ajax提交并实现单个div刷新

web开发中我们经常会遇到局部刷新页面的需求,以前我经常使用ajax和iframe实现局部刷新,后来做政府的项目,对页面的样式要求比较多,发现使用iframe控制样式什么的很麻烦,所以就采用了新的办法...
  • smszhuang168
  • smszhuang168
  • 2013年11月30日 10:17
  • 24167
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery实现页面局部刷新
举报原因:
原因补充:

(最多只允许输入30个字)