javascript - 导航栏和 AJAX 加载

Question

我有以下设置:

一个 ma​​in-page.php 由以下部分组成:

1) 标题

2) 导航栏

3) 内容(在 <div id="dynamic-content"></div> 中加载)

4) 页脚

在导航栏中，您可以找到多个选项(例如，关于我们、联系我们等)。

假设负责“关于我们”的脚本名为 about-us.php。

我想要实现的是在我按下“关于我们”后立即在内容区域(也称为动态内容 div)内加载 about-us.php 页面的输出按钮(#about-us div)。

为了实现这一点，我使用了以下 AJAX 调用:

AJAX 调用

$("#about-us").on('click', function(){

   $.ajax({
              url: "about-us.php",
              success: function(output){

                   $("#dynamic-content").html(output);

              }
         });

});

ma​​in-page.php 和 about-us.php 都包含它们自己的 CSS 和 JavaScript 文件:

ma​​in-page.js 和 ma​​in-page.css 包含在 main-page.php 中

about-us.js 和 about-us.css 包含在 about-us.php 中

问题:

about-us.php 的 CSS 和 Javascript 文件的正确使用方法是什么？ 我应该将它们包含在 about-us.php 脚本中还是将它们包含在 ma​​in-page.php 中？

当我将它们包含在 about-us.php 中时，我从控制台收到一条警告，说“主线程上的同步 XMLHttpRequest 已被弃用，因为它对最终用户的体验有不利影响”。 p>

此时我不得不提到 about-us.js 有更多的 AJAX 请求..

提前致谢。

Answer 1

最佳做法是将您的 JS 和 css 包含在 main-page.php 中。正如您提到的，关于我们导航只会更改动态内容，那么它应该只会更改数据。在此之前应加载所有脚本和样式表。