在项目中，经常会用到ajax，比如实现局部刷新，比如需要前后端交互等，这里呢分享局部刷新的两种方法，主要用的是ajax里面的.load()，其他高级方法的使用以后再做详细笔记。

第一种：

当某几个页面都有相同的头部、导航、底部的时候，点击导航链接可以在几个页面中切换，此时想要的效果是点击链接后只切换内容部分，其他不再重新加载。上代码。

jq-load.html：

 <!DOCTYPE html>

 <html>

   <head>

     <title>ajax局部刷新</title>

   </head>

   <body>

     <header>

       <nav>

         <a href="jq-load.html" class="current">首页</a>

         <a href="jq-load2.html">新闻资讯</a>

         <a href="jq-load3.html">用户中心</a>

       </nav>

     </header>

     <section id="content">

       <div id="container">

           首页的内容

       </div>

     </section>

     <script src="js/jquery-1.11.0.min.js"></script>

     <script src="js/jq-load.js"></script>

   </body>

 </html>

注：jq-load2.html、jq-load3.html与jq-load.html代码基本一致，只在#container的div里展示的内容不一样。

jq-load.js：

 $('nav a').on('click', function(e) {

   e.preventDefault();  // 阻止链接跳转

   var url = this.href;  // 保存点击的地址

   $('nav a.current').removeClass('current');

   $(this).addClass('current');                       

   $('#container').remove();

   $('#content').load(url + ' #container').fadeIn('slow'); // 加载新内容,url地址与该地址下的选择器之间要有空格,表示该url下的#container

 });

注：此种方法用到了一些html5里面的新标记，在js中创建它们不再赘述。

第二种：

如果网页的左侧有一个列表，点击列表使右侧的内容进行切换，如果右侧的内容过多，不适合做选项卡，这时候用.load()局部刷新最好不过了。上代码。

user.html：

 <!DOCTYPE html>

 <html lang="en">

     <head>

         <title>个人中心</title>

         <meta charset="utf-8">

         <script src="js/jquery-1.11.0.min.js"></script>

         <script src="js/user.js"></script>

     </head>

     <body>

         <div class="userWrap">

             <ul class="userMenu">

                 <li class="current" data-id="center">用户中心</li>

                 <li data-id="account">账户信息</li>

                 <li data-id="trade">交易记录</li>

                 <li data-id="info">消息中心</li>

             </ul>

             <div id="content"></div>

         </div>

     </body>

 </html>

user.js：

$(function(){

    $(".userMenu").on("click", "li", function(){

        var sId = $(this).data("id");  //获取data-id的值

        window.location.hash = sId;  //设置锚点

        loadInner(sId);

    });

    function loadInner(sId){

        var sId = window.location.hash;

        var pathn, i;

        switch(sId){

            case "#center": pathn = "user_center.html"; i = 0; break;
　　　　　　　case "#account": pathn = "user_account.html"; i = 1; break;

            case "#trade": pathn = "user_trade.html"; i = 2; break;

            case "#info": pathn = "user_info.html"; i = 3; break;
　　　　　　  default: pathn = "user_center.html"; i = 0; break;

        }

        $("#content").load(pathn); //加载相对应的内容

        $(".userMenu li").eq(i).addClass("current").siblings().removeClass("current"); //当前列表高亮

    }

    var sId = window.location.hash;

    loadInner(sId);

});

user_center.html：

<div>

    用户中心

    ……

</div>

注：其他user_xxx.html的页面也是列表相对应的内容，此处不再赘述。

总结：

以上两种方法原理是一样的，通过.load()重新加载页面中的某一部分，需注意，ajax需要在服务器环境下运行。通过对比，可发现第一种比较简单，第二种稍复杂些，不过个人推荐第二种，第一种主要是举个例子，看.load()是怎么来用的，其实它在用户体验方面稍逊一筹，比如点击的时候地址栏里地址不变，使前进、后退失效，这个可以到后面再实现。而第二种的话运用比较灵活，巧妙的借助data-*的自定义属性来存储数据，点击的时候修改锚点，因为地址有变，所以刷新的时候仍然会保持当前的页面内容而不是切换到第一个。

如果有什么问题，还请园子里的朋友多多指教。多谢。

2017-11-15

附上一篇详细的ajax应用的博文

附上第一个例子的下载链接

附上第二个例子的下载链接

jQuery+ajax实现局部刷新的更多相关文章

  1. Ajax 异步局部刷新

    Ajax 异步局部刷新 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页 ...

  2. jquery的div局部刷新

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

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

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

  4. asp.net mvc3 利用Ajax实现局部刷新

    1.利用Ajax.ActionLink()方法 首先在_Layout.cshtml文件中加载 运行AJAX必要的Jquery <script src="@Url.Content(&qu ...

  5. jquery实现页面局部刷新

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

  6. jQuery AJAX 网页无刷新上传示例

    新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...

  7. jquery ajax php 无刷新上传文件 带 遮罩 进度条 效果的哟

    在很多项目中都会叫用户上传东西这些的,自从接触了jquery 和ajax之后就不管做什么,首先都会想到这个,我这个人呢?是比较重视客户体验的,这次我这边负责的是后台板块,然后就有一块是要求用户上传照片 ...

  8. C# 利用ajax实现局部刷新

    C#所有runat="server"的控件都会造成整个界面的刷新,如果想实现局部刷新,可以利用ajax. 需要加入的控件有ScriptManager和UpdatePanel,可以实 ...

  9. Ajax定时局部刷新

    1.局部刷新一个地方 function refreshOnTime(){ $.ajax({ //配置 }); //7秒后重复执行该函数 setInterval('refreshOnTime', 700 ...

随机推荐

  1. python之路第五篇之递归（进阶篇：续：经典例子剖析）

    递归 在函数内部,可以调用其他函数; 如果一个函数在内部调用自身本身,这个函数就是递归函数. 例如,我们来计算阶乘: n! = 1 x 2 x 3 x ... x n, 用函数f1(n)表示,可以看出 ...

  2. php soap实现WebService接口

    nusoap是php写的一个功能文件,下载地址:http://pan.baidu.com/s/1i3mUQJr 一.不使用wsdl服务端 server.php <?php //包函nusoap. ...

  3. Asp.Net MVC4 系列--进阶篇之路由 （2）

    上一篇介绍了Asp.Net MVC 中,从Http Pipeline上接收到请求如何匹配,匹配限制,以及如何控制在指定命名空间查找,解析出controller和action,并传参. 这篇主要介绍如何 ...

  4. [js高手之路]html5 canvas动画教程 - 下雪效果

    利用canvas,实现一个下雪的效果,我们先预览下效果: 我们先分析下这个效果: 1,随机产生雪花 2,雪花的产生不是同时产生,而是有先后顺序的 3,雪花怎么表示 4,怎么源源不断的下雪 5,雪花有大 ...

  5. 笨鸟先飞之ASP.NET MVC系列之过滤器(05结果过滤器)

    概念介绍 结果过滤器看名字就知道这个过滤器是针对方法所产生结果的,结果过滤器,主要在我们的动作方法结果返回前后执行. 如果我们需要创建结果过滤器需要实现IResultFilter接口. namespa ...

  6. win10 UWP Markdown 含源代码

    Windows下没有比较好的Markdown编辑器 我就自己写一个 csdn的Markdown很好,就是我需要截图保存有麻烦 需要把我的截图保存在本地,然后上传 这个过程比较麻烦 csdn的图没法外链 ...

  7. java的windows自动化-自动运行java程序

    那么在一些工具齐全并且已经有了一定的写好的java程序的情况下(环境变量和软件见上一章http://www.cnblogs.com/xuezhezlr/p/7718273.html),如何自动化运行j ...

  8. 【NOIP2016提高组】 Day2 T2 蚯蚓

    题目传送门:https://www.luogu.org/problemnew/show/P2827 自测时被题面所误导...,题面中说逢t的倍数才输出答案,以为有什么玄妙的方法直接将m次操作变成了m/ ...

  9. [extjs(1)]MyEclipse2014安装ext4插件Spket

    1 解压好的Spket目录如下 2  建议以link方式安装Spket到MyEclipse中 找到MyEclipse的安装目录 如 3  在MyEclipse 的根目录新建一个目录extjs 当然也可 ...

  10. JS中的单引号和双引号

    JS里面的单引号和双引号可以同时使用,但是要遵循一定的准则. 最外面用了双引号了,那么里面就不能再用双引号了,因为引号是成双对的,浏览器读到一个双引号后,到第2个双引号时才算结束:同理,浏览器读到一个 ...