脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → AJAX相关 → AJAX指定部分页面刷新效果

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请求类...
    2006-12-12
  • 使用加载图片解决在Ajax数据加载中页面出现短暂空白的问题(推荐)

    使用加载图片解决在Ajax数据加载中页面出现短暂空白的问题(推荐)

    在项目中用ajax异步获取数据后有时会因为数据问题或者网络问题，页面一直显示空白，现在用加载图片来过渡这种状态，具体实例代码通过本文一起学习吧
    2016-12-12
  • AJAX应用中必须要掌握的重点知识(分享)

    AJAX应用中必须要掌握的重点知识(分享)

    下面小编就为大家带来一篇AJAX应用中必须要掌握的重点知识(分享)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • ajax post下载flask文件流以及中文文件名问题

    ajax post下载flask文件流以及中文文件名问题

    这篇文章主要介绍了ajax post下载flask文件流以及中文文件名问题，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • 基于原生ajax与封装的ajax使用方法(详解)

    基于原生ajax与封装的ajax使用方法(详解)

    下面小编就为大家带来一篇基于原生ajax与封装的ajax使用方法(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • ajax和jsonp跨域的原理本质详解

    ajax和jsonp跨域的原理本质详解

    跨域问题是我们在开发中经常会遇到的一个需求，下面这篇文章主要给大家介绍了关于ajax和jsonp跨域的原理本质，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2017-11-11
  • Ajax请求超时与网络异常处理图文详解

    Ajax请求超时与网络异常处理图文详解

    最近在项目中遇到一个问题，当加载数据量特别大的时候会出现加载超时现象，所以这篇文章主要给大家介绍了关于Ajax请求超时与网络异常处理的相关资料,需要的朋友可以参考下
    2021-05-05
  • Ajax开始准备入门篇

    Ajax开始准备入门篇

    我很开心您来阅读我写的关于ajax的实例教程,无论您是第一次还是老朋友.我将在这里献上我至今所学,并毫不吝啬。
    2010-10-10
  • 利用Ajax实现在脚本里传值实例介绍

    利用Ajax实现在脚本里传值实例介绍

    Ajax实现在脚本里传值可以解决实际上的一些问题，本文实现了一下，感兴趣的朋友可以参考下，希望可以帮助到你
    2013-04-04
  • Ajax基础与登入教程

    Ajax基础与登入教程

    Ajax 是 Asynchronous JavaScript and XML的缩写。其优点可以减轻服务器的负担,按需取数据,最大程度的减少冗余请求。接下来通过本文给大家介绍Ajax基础与登入教程，需要的的朋友参考下
    2017-03-03

最新评论