AJAX实现指定部分页面刷新效果

 更新时间:2021年10月14日 16:12:53   作者:不争亦不屑  
这篇文章主要为大家详细介绍了AJAX实现指定部分页面刷新效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了AJAX实现指定部分页面刷新效果的具体代码,供大家参考,具体内容如下

这个例子使用了bootstrap,jQuery和NProgress进度条插件,事先需引入相关文件。

需求:点击左边的选项,不需要整个页面刷新,只进行右边页面的刷新。


这里需要三个文件

work.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>主页面</title>
</head>
<body>
      <main id="main">
        <h2>这是工作经验界面</h2>
        <hr>
      </main>
</body>
</html>

hobbit.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>主页面</title>
</head>
<body>
      <main id="main">
        <h2>这是兴趣爱好界面</h2>
        <hr>
      </main>
</body>
</html>

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>主页面</title>
  <link rel="stylesheet" href="bootstrap.min.css" >
  <link rel="stylesheet" href="../nprogress.css" >
  <script src="../nprogress.js"></script>
</head>
<body>
  <div class="container pt-4">
    <h1>会员中心</h1>
    <hr>
    <div class="row">
      <aside class="col-md-3">
        <div class="list-group">
          <a class="list-group-item list-group-item-action" href="index.html" >个人信息</a>
          <a class="list-group-item list-group-item-action" href="work.html" >工作经验</a>
          <a class="list-group-item list-group-item-action" href="hobbit.html" >兴趣爱好</a>
        </div>
      </aside>
      <main id="main" class="col-md-9">
        <h2>这是我的个人信息界面</h2>
        <hr>
      </main>
    </div>
  </div>
  <script src="../jquery-3.4.1.js"></script>
  <script>
    $(function ($) {
  // 入口函数带参数$,原因是有一个独立的作用域,顺便确保页面加载完成执行

  //全局AJAX事件处理
      $(document)
        .ajaxStart(function () {
          NProgress.start()
        })
        .ajaxStop(function () {
          NProgress.done()
        });
      $('.list-group-item').on('click', function () {
        var url = $(this).attr('href')
        //后面的 #main 指的是载入页面的 id 
        $('#main').load(url + ' #main > *')
        //列表组中是 a 标签,禁止它跳转到相应界面
        return false
      })
    })
  </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 揭开AJAX神秘的面纱(AJAX个人学习笔记)

    揭开AJAX神秘的面纱(AJAX个人学习笔记)

    写这个学习笔记,只是记载一下自己的学习经过和体会,把一些学习重点记录下来,以备今后的巩固复习及应用,很多知识点没有详细介绍,所以并不完全适用于初学者,如果你是初学者,最好选择一本AJAX学习的书籍,然后与这篇学习笔记对照学习,效果会更好。
    2009-09-09
  • 用AJAX技术聚合RSS

    用AJAX技术聚合RSS

    用AJAX技术聚合RSS...
    2007-02-02
  • 分享ajax的三种解析模式

    分享ajax的三种解析模式

    这篇文章主要介绍了分享ajax的三种解析模式的相关资料,需要的朋友可以参考下
    2015-12-12
  • ajax实例入门代码

    ajax实例入门代码

    想学习ajax的朋友,如果刚开始接触可以查看脚本之家的ajax栏目,之前的一些文章。
    2008-11-11
  • ajax 开发守则 10条说明

    ajax 开发守则 10条说明

    介绍ajax开发十大守则,相信对开发人员会有用的。
    2009-07-07
  • ajax调用简单实例

    ajax调用简单实例

    这篇文章主要介绍了ajax调用简单实例,结合实例形式分析了基于ajax调用讲URL返回数据填充到指定div的功能,需要的朋友可以参考下
    2015-12-12
  • Ajax loading gif generator

    Ajax loading gif generator

    Ajax loading gif generator...
    2006-11-11
  • ajax无刷新分页的简单实现

    ajax无刷新分页的简单实现

    这篇文章主要为大家详细介绍了ajax无刷新分页的简单实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • 如何将ajax请求返回的Json格式数据循环输出成table形式

    如何将ajax请求返回的Json格式数据循环输出成table形式

    ajax请求返回Json格式数据,在网上有很多的处理方法,本文教大家如何循环输出成table形式,代码很详细,感兴趣的朋友可以参考下
    2013-10-10
  • 利用ajax提交form表单到数据库详解(无刷新)

    利用ajax提交form表单到数据库详解(无刷新)

    这篇文章主要给大家介绍了关于利用ajax提交form表单到数据库(无刷新)的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-02-02

最新评论