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

  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很简单，示例如下：

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="js/jquery.js"></script>
  4. <script type="text/javascript">
  5. function getOtherMessage(){
  6. $.ajax({
  7. type:"post",
  8. url:"${pageContext.request.contextPath}/getOtherMessage.do",
  9. success:function(msg){
  10. $("#view").html(msg);
  11. },
  12. error:function(){
  13. alert("wrong");
  14. }
  15. });
  16. }
  17. </script>
  18. </head>
  19. <body>
  20. <input type="button" value="修改" onclick="getOtherMessage();" />
  21. <div id="view">
  22. 456
  23. </div>
  24. </body>
  25. </html>

jquery实现页面局部刷新的更多相关文章

  1. jquery 实现页面局部刷新ajax做法

    这个方法就多了去了,常见的有以下几种:下面介绍全页面刷新方法:有时候可能会用到 window.location.reload()刷新当前页面. parent.location.reload()刷新父亲 ...

  2. jquery的div局部刷新

    jquery的div局部刷新 //div的局部刷新 $(".dl").load(location.href+" .dl"); 全页面的刷新方法 window.l ...

  3. JQuery 实现页面无刷新

    对于JQuery实现页面无刷新的效果,即:应用这个JQuery这个组件,可以实现在页面上加载数据库中的数据信息,但是并没有给用户页面刷新的感觉,这样既可以有效的进行数据交互,也可以不妨碍用户的其他操作 ...

  4. 使用ajax与iframe嵌套实现页面局部刷新

    使用ajax与iframe嵌套实现页面局部刷新.该javascript代码仅供参考,需按自己需要修改.​1. [代码]javascript代码 function cj_start(depname,gr ...

  5. 浅析PHP页面局部刷新功能的实现小结(转)

    转载地址 https://www.jb51.net/article/38901.htm 方法其实挺多的.以前比较常用的是iframe这样来做.现在多了个ajax,所以一般情况下都是用的ajax.第一种 ...

  6. ASP.Net用jQuery ajax实现页面局部刷新

    刚开始的时候使用asp的updatepanel控件实现局部刷新,而且在本地运行正确,但是部署到服务器上就变成整个页面全部刷新了.服务器用的是Windows server2000,本地机子上用的是win ...

  7. HTML页面局部刷新

    /.事件响应刷新:有请求才会刷新 1.通过JS HTML DOM或jQuery获取HTML元素,通过DOM方法或jQuery方法监听页面事件,获取用户请求: 2.通过Ajax将用户请求提交至服务器,服 ...

  8. spring mvc + ajax上传文件，页面局部刷新

    1.点击上传按钮进行如下操作,通过表单名称以及input名称获取相应的值,对于上传的文件,使用.files来获取, 因为包含文件的上传,所以采用FormData的形式来进行数据交互,通过append将 ...

  9. jQuery Pjax – 页面无刷新加载，优化用户体验

    pjax 是 HTML5 pushState 以及 Ajax 两项技术的简称,综合这两个技术可以实现在不刷新页面的情况下载入 HTML 到当前网页,带给你超快速的浏览器体验,而且有固定链接.标题以及后 ...

随机推荐

  1. devexpress datagrid 与imageEdit以及如何存图片到数据库 z

    http://blog.csdn.net/haoyujie/article/details/41277703 首先建立了一个数据库的表,这个表中,有一个字段是image类型(SQL Server数据库 ...

  2. [转]Loadrunner11之VuGen运行时设置Run-Time Setting

    转自:http://www.51testing.com/html/92/450992-248065.html General 1.Run Logic运行逻辑 脚本如何运行的,每个action和acti ...

  3. VC++中内存对齐

    我们经常看到求 sizeof(A) 的值的问题,其中A是一个结构体,类,或者联合体. 为了优化CPU访问和优化内存,减少内存碎片,编译器对内存对齐制定了一些规则.但是,不同的编译器可能有不同的实现,本 ...

  4. 前端面试题（JS篇）

    原题地址:http://handyxuefeng.blog.163.com/blog/static/454521722013111714040259/ 好吧,最近打算换工作,所以关注比较多的是面试题, ...

  5. 【Hadoop代码笔记】Hadoop作业提交之Job初始化

    一.概要描述 在上一篇博文中主要描述了JobTracker和其几个服务(或功能)模块的接收到提交的job后的一些处理.其中很重要的一部分就作业的初始化.因为代码片段图的表达问题,本应该在上篇描述的内容 ...

  6. x-debug配置简述 - chunyu

    一 x-debug 是什么?在配置之前,先解决一个问题,x-debug 是什么?我也不查标准答案了,就说说个人理解.x-debug是一个PHP调试工具,帮助开发者在IDE里面进行代码的断点调试,效果如 ...

  7. KM算法详解+模板

    http://www.cnblogs.com/wenruo/p/5264235.html KM算法用来求二分图最大权完美匹配. 本文配合该博文服用更佳:趣写算法系列之--匈牙利算法 现在有N男N女,男 ...

  8. Hadoop HDFS概念学习系列之分布式文件管理系统（二十五）

    数据量越来越多,在一个操作系统管辖的范围存在不了,那么就分配到更多的操作系统管理的磁盘中,但是不方便管理和维护,因此迫切需要一种系统来 管理多台机器上的文件,这就是分布式文件管理系统. 是一种允许文件 ...

  9. ControlsFX8.0.2中对话框无法判断是否显示的修改

    在org.controlsfx.dialog.FXDialog.java中加入 public abstract boolean isShowing(); 在org.controlsfx.dialog. ...

  10. HDU 5858 Hard problem （数学推导）

    Hard problem 题目链接: http://acm.split.hdu.edu.cn/showproblem.php?pid=5858 Description cjj is fun with ...