Question

我有以下设置：

main-page.php ，包含：

1）标题

2）导航栏

3）内容（加载在<div id="dynamic-content"></div>内）

4）页脚

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

让我们说这个脚本负责＆＃34; 关于我们＆＃34;被称为 about-us.php 。

我想要实现的是在内容区域（也就是动态内容div）中加载 about-us.php 页面的输出，只要按下＆＃34;关于我们＆＃34;按钮（＃about-us div）。

为了达到这个目的，我使用以下AJAX调用：

AJAX致电

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

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

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

              }
         });

});

main-page.php 和 about-us.php 都包含自己的CSS和JavaScript文件：

main-page.php中包含

main-page.js 和 main-page.css

about-us.php中包含

about-us.js 和 about-us.css

问题：

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

当我将它们包含在about-us.php中时，我从控制台收到一条警告说＆＃34; 主线程上的同步XMLHttpRequest因其对最终用户体验的不利影响而被弃用/ EM>＆＃34;

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

提前致谢。

Answer 1

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

Answer 2

你可以做到这两点。但是如果你添加js。在about-us.php文件中关于about-us.php的css然后它会更好。这意味着只有当用户点击更好的按钮时才会加载js和css。

虽然您必须确保在两个css文件（about-us.css和mainpage.css）中使用的“class”“id”必须不同，否则将由aboutus.css覆盖mainpage.css的id和类ids或类。

导航栏和AJAX加载

2 个答案: