jquery实现页面局部刷新

最新推荐文章于 2023-01-29 10:00:43 发布
最新推荐文章于 2023-01-29 10:00:43 发布
阅读量1.5k 收藏
点赞数
分类专栏： jquery 文章标签： jquery xmlhttprequest function java ajax email

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="修改" οnclick="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. <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="修改" οnclick="getOtherMessage();" />  
  21.         <div id="view">  
  22.             456  
  23.         </div>  
  24.     </body>  
  25. </html>  

 

 

小开不怕不怕
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
使用jQuery提供的ajax函数实现局部刷新
fly_can_reach的博客
10-16 663
需求:在浏览器不跳转页面的条件下实现从后台获取数据并且局部刷新页面 需要的插件： 1.在 WEB-INF 目录下创建 lib 目录，拷贝 jar 文件 2.创建目录 js，拷贝 jQuery.js 文件 index.jsp 先导入js <script type="text/javascript" src="js/jquery-3.4.1.js"></script> 随便加点东西 <body> <div> name:..
jQuery实现局部刷新的几种方式
Faith1460的博客
04-09 7416
使用jquery实现局部刷新，我一般会使用两种方法。 一种是真刷新，从服务器端获取刷新后的结果，并输出到页面。 另一种是假刷新，得到参数更改的确认之后，并不从服务端得到数据，而是直接使用脚本，将现有页面的信息更改为修改后的状态。 目前先写个概要，详细的代码等我整理完发上来。
JQ/JS html页面局部内容刷新
flymore96的博客
01-29 493
JQ/JS html页面局部内容刷新
JQuery 再谈ajax局部刷新
热门推荐
沉默王二
09-28 1万+
JQuery 再谈ajax局部刷新
jquery无刷新添加和删除input输入框
Thankdj
09-09 594
jquery控制页面部分刷新的方法
10-24
主要介绍了jquery控制页面部分刷新的方法,涉及jQuery中load方法的使用技巧,需要的朋友可以参考下
jQuery实现AJAX定时刷新局部页面实例
10-23
本篇文章通过两种方法实例讲解ajax定时刷新局部页面，当然方法有很多种，也可以不使用ajax来刷新页面，可以使用jquery中的append来给指定内容加东西，但是都不太实用，最实用的方法还是ajax加载数据了。
用Jquery.load载入页面实现局部刷新
10-26
用jquery.load的方法载入新的页面，以实现局部刷新，可结果发现载入进来的页面与原来单独的页面不一样，样式没了，关于这个问题，下面有个不错的解决方法
jquery ajax 局部刷新小案例
10-26
总结，这个jQuery AJAX局部刷新的小案例展示了如何利用AJAX技术动态地更新页面部分区域，提高用户体验。通过理解和实践这样的案例，开发者可以更熟练地运用AJAX，优化网页应用的性能和交互性。在实际项目中，根据...
jQuery无刷新实时修改网页Input的内容
05-12
内容索引:脚本资源,jQuery,无刷新修改　　jQuery无刷新实时修改网页Input的内容，可以把input数据在不经过数据读取的情况下及时修改，增强用户体验，确认修改后再上传数据库。 　　这种功能估计大家以前都见到过的，特别是在一些用户体验比较好的CMS系统后台内，想编辑某个值的时候，不需要打开值所在的表单，节省用户时间也减少服务器资源浪费，是项比较实用、人性的功能。
AJAX(prototype)实现的局部刷新搜索框实例
weixin_34348174的博客
06-11 113
AJAX是个老话题了，传统的web应用允许用户填写表单(form)，当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然后返回一个新的网页。这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。 与此不同，...
点击刷新按钮，刷新输入框的内容
白小白的小白的博客
11-17 1457
点击刷新按钮，刷新输入框的内容，代码如下： <script language="javascript"> window.onload=function() { document.forms[0].reset(); placeFocus(); } function placeFocus() { document.forms[0].elements[0].focus(); ...
如何使用 jQuery 刷新页面？
kalman2019的博客
12-30 8537
如何使用 JavaScript 刷新页面？
jQuery/js刷新页面、失去焦点、json字符串转换、禁止图片拖拽等..
nann-viiv 的博客
05-23 823
记录下一些简单的jQuery使用:(/待更新) 1. 刷新页面部分 1) 全部刷新 刷新当前页面: window.location.reload(); 刷新父页面: parent.location.reload() 刷新父窗口对象(单开窗口): opener.location.reload() 刷新最顶端对象(多开窗口): top.location.reload() 2) 局部刷新...
jQuery 局部div刷新和全局刷新方法总结
荒的博客
08-09 3212
div的局部刷新 $(".advantage").load(location.href+" .advantage"); 全页面的刷新方法 window.location.reload()刷新当前页面. parent.location.reload()刷新父亲对象（用于框架） opener.location.reload()刷新父窗口对象（用于单开窗口） top.location.reload()刷新最顶端对象（用于多开窗口） ...
Web_全页面刷新
fantaxy025025的专栏
06-10 283
http://hn2002.iteye.com/blog/446441   全页面刷新方法：有时候可能会用到 window.location.reload()刷新当前页面. parent.location.reload()刷新父亲对象（用于框架） opener.location.reload()刷新父窗口对象（用于单开窗口） top.location.reload()刷新最顶端对象（用...
页面不刷新实现局部刷新
最新发布
06-10
要实现页面局部刷新，可以使用以下方法： 1. Ajax技术：通过Ajax技术向服务器发送异步请求，获取数据并更新页面的局部内容，而不需要重新加载整个页面。 2. WebSocket技术：WebSocket是一种基于TCP协议的双向通信...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值