后台管理中总是使用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. 无法加载 DLL“ArcGISVersion.dll”: 找不到指定的模块

    无法加载 DLL“ArcGISVersion.dll”: 找不到指定的模块.(异常来自 HRESULT:0x8007007E).

  2. android edittext不弹出软键盘

    方法一: 在AndroidMainfest.xml中选择哪个activity,设置windowSoftInputMode属性为adjustUnspecified|stateHidden 例如:< ...

  3. javascript面向对象实例

    非私有属性 function Student(name, gender, age, grade, teacher){ this.name = name; this.gender = gender; t ...

  4. Quartz使用总结

    废话的前言 以前凭借年轻,凡事都靠脑记.现在工作几年后发现,很多以前看过.用过的东西,再次拿起的时候总觉得记不牢靠."好记性不如烂笔头"应该是某位上了年纪的大叔的切肤之痛(仅次于上 ...

  5. C++中cin、cin.get()、cin.getline()、getline()、gets()等函数的用法----细节决定成败 （sort用法）

    C++中cin.cin.get().cin.getline().getline().gets()等函数的用法 学C++的时候,这几个输入函数弄的有点迷糊:这里做个小结,为了自己复习,也希望对后来者能有 ...

  6. 【解决】SAE部署Django1.6+MySQL

    终于可以舒口气了,今天大部分时间都在搞这个,很是蛋疼,网上资料良莠不齐,我不信这个之前没人做过,但是他们确实分享的不够好. 废话不多说,还是记录一下今天的工作吧. 1,装SVN 这个没什么好说的,去官 ...

  7. PHP 碎片

    1. $_SERVER['REMOTE_ADDR'] cannot be modified by the user or via HTTP so you CAN trust it. -- 用这个可以有 ...

  8. PartialView

    一.客户端直接请求分部视图(如使用AJAX) Return PartialView()  不加载布局页面,不执行_ViewStart.cshtml AJAX  /Home/LoginPart 二.视图 ...

  9. 转】Mahout推荐算法API详解

    原博文出自于: http://blog.fens.me/mahout-recommendation-api/ 感谢! Posted: Oct 21, 2013 Tags: itemCFknnMahou ...

  10. ntpdate server时出错原因及解决

    错误1.Server dropped: Strata too high 在ntp客户端运行ntpdate serverIP,出现no server suitable for synchronizati ...