后台管理中总是使用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. linux_2015_0827_linux中一些常用词的发音and…

    linux相关 Unix: [ ju:niks ] 发音 (yew-nicks) 尤里克斯 GNU [ gəˈnju: ] 发音 (guh-noo) 葛扭 Linux: [ 'li:nэks ] 里那 ...

  2. Using NuGet without committing packages to source control(在没有把包包提交到代码管理器的情况下使用NuGet进行还原 )

    外国老用的语言就是谨慎,连场景都限定好了,其实我们经常下载到有用NuGet引用包包然而却没法编译的情况,上谷歌百度搜又没法使用准确的关键字,最多能用到的就是nuget跟packages.config, ...

  3. 利用BlazeDS的AMF3数据封装与Flash 进行Socket通讯

    前几天看到了Adobe有个开源项目BlazeDS,里面提供了Java封装AMF3格式的方法.这个项目貌似主要是利用Flex来Remoting的,不过我们可以利用他来与Flash中的Socket通讯. ...

  4. iOS tableview 优化总结

    根据网络上的优化方法进行了总括.并未仔细进行语言组织.正在这些优化方法进行学习,见另一篇文章 提高app流畅度 1.cell子控件创建写在 initWithStyle:reuseIdentifier ...

  5. Visual Studio Profiler 跟踪检查每个exe dll 性能 执行时间 CPU占用情况的方法

  6. Android签名用keytool和jarsigner制作apk文件

    生成证书 keytool -genkey -alias aeo_android.keystore -keyalg RSA -validity -keystore aeo_android.keystor ...

  7. 让一个div可以编辑加上contenteditable＝true 复制来的内容带有样式，需要清除复制的样式

    sEv传keyup进去 function(id,sEv){ id.on(sEv,function(){ var str = $(this).html(); //获取复制进来的内容 var re=/&l ...

  8. mysql cluster 名词概念解读

    Node Group [number_of_node_groups] = number_of_data_nodes / NoOfReplicas Partition When using ndbd, ...

  9. S3

    S3是Amazon EMR的一部分,它提供了一些Wikipedia的浏览统计数据,这些浏览数据的格式便于Spark测试.

  10. ucos创建任务的一般方法

    一般说来,任务可在OSStart()启动任务调度之前来创建,也可在任务中创建,但是UC/OS有个规定:在调用OSStart()启动任务调度之前,必须创建了至少一个任务.因此一般习惯上,在OSStart ...