用ajax加载主要内容答案

【问题标题】：Load main content with ajax用ajax加载主要内容
【发布时间】：2019-06-06 18:11:56
【问题描述】：

我的所有 .html 页面上都有一个导航栏 div。为了不在每个页面上复制粘贴导航条代码，我使用该代码创建了一个 .html 页面，并通过 jquery 在每个页面上打印它，如下所示：

<div id="includeNavbar"></div>

实际打印的代码是：

$(function(){
      $("#includeNavbar").load("navbar.html"); 
});

有没有办法保持导航栏加载并通过jquery加载剩余内容但仍然使用这种类型的打印方法？

我正在使用最新的 Bootstrap 版本

【问题讨论】：

是的，如果我理解正确的话，您要实现的目标称为 SPA 单页应用程序。要使用 jQuery 做到这一点，您必须将网站上的所有链接替换为可以加载适当内容的事件。我只能建议对 React.JS / AngularJS / Vue.js 等框架使用更现代的方法，...
我实际上只有两个页面可以通过导航栏加载（我正在使用引导程序）

标签： javascript html ajax bootstrap-4

【解决方案1】：

您的代码是在其他 html 文件中加载 HTML 文件的简单方法。坚持下去。

您还可以将html 文件类型更改为php，然后您可以将include 或require 放在您想要的位置。

喜欢这个

导航栏.php

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

你的Main.php 页面是你想要另一个页面的地方。

Main.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<?php require 'nav-bar.php'?>   


</body>
</html>

希望你能找到答案。 :)

【讨论】：

听起来不错。那么，这样一来，我应该可以通过ajax加载页面的剩余部分了吧？
是的。 PHP require 或 include 只是替换了导航栏的 .load() javascript。其他一切都是一样的。 .html 和 .php 之间的唯一区别是 .php ALSO 将运行放置在 <?php 和 ?> 标记之间的任何 PHP 命令。否则，HTML 的处理方式相同。 真的，没有理由使用.html -- 除非您的网络服务器不使用 PHP（非常罕见，Microsoft 网络服务器除外）