0

目前我正在设计一个我不太了解ajax但愿意/渴望学习的网页）或者是否最好继续使用标准的jquery显示/隐藏，如果是这样，是什么让一个比另一个更受欢迎？我正在加载的这个内容将是静态内容 btw链接。在网站的项目选项卡上，我遇到了一个问题，因为我对正确的协议没有经验（对不起）。在侧面菜单上，将有一个选项可以选择要显示的某些内容（CAD、FEA、MATLAB 等），然后选择的内容将显示在网站的主要内容部分。我遇到的问题是，当我使用 javascript/jquery 将所有内容放在 1 页上，然后在用户使用锚点选择时显示/隐藏各个部分时，页面加载速度非常慢，因为内容很多. 我想知道在这种情况下使用 AJAX 是否更好，如果是这样，我将如何在内容部分加载这些新内容（使用 iframe 或创建新页面？

4

4 回答 4

2

您可以使用 jQuery ajax按需加载内容。load方法很适合这个。

我认为您对 jQuery 和 ajax 感到困惑。jQuery 是一个让我们的生活更轻松的 javascript 库。如果没有 jQuery，你也可以做 ajax，但正如我所说，它让我们的生活更轻松。所以我们要使用它。

假设您的主页中有这样的标记来显示链接或菜单，另一个 div 来显示链接的内容，并且您在此页面中也包含了 jQuery 库。

<div class="divNavigation">
  <a href="about.html" class="ajaxLink" >About</a>
  <a href="about.contact" class="ajaxLink">Contact</a>
  <a href="about.team" class="ajaxLink">Team</a>
</div>
<div id="divContentArea">
</div>

现在让我们监听这些链接的点击事件，然后异步加载链接目标的内容，并将异步调用的结果加载到我们的内容 div。

添加这个 javasctipt

<script type="text/javascript">

  $(function(){ 

       $("a.ajaxLink").click(function(e){    // #1
          e.preventDefault();                     // #2
          var linkTargetUrl=$(this).attr("href");   // #3
          $("#divContentArea").load(linkTargetUrl);  // #4

       });    
  });

</script>

我们在这里做什么 ？

#1：我们正在寻找clickDOM 中所有带有 css 类名称 ajaxLink 的标签的事件。每当点击事件发生时，内部代码就会执行。

  • 如果我们想选择具有类名的元素，我们使用$(".className")，其中 className 是元素的 CSS 类名。在我们的示例中，我们告诉 jquery 给我们所有具有该类名称的锚标记。

  • 如果我们想选择一个带有 ID 的元素），我们使用$("#elementID")，其中 elementID 是元素的 CSS ID。

更多关于 jQuery 选择器的信息在这里。

#2：我们将异步加载内容，而页面实际上并没有导航到目标 url。所以我们需要防止链接点击的默认行为。我们正在使用preventDefault方法（用 jQuery 库编写）来执行此操作。所以页面将保持原样。不重新加载。

#3：我们正在读取href链接的属性值并将该值设置为局部变量。$(this)表示当前激活的项目。因为我们在锚标记的 clink 事件中工作，所以$(this)意味着单击的锚元素。

#4：我们正在使用load方法（在 jQuery 中）进行 ajax 调用；此方法将加载目标 url 的内容并将其设置为具有 Id 的 div 的内部 html divContentArea。

我建议您使用一些示例代码。将 alert/console.debug 放在变量/对象上，看看会有什么价值。这是学习这个的最好方法。祝你好运。

最后声明（纯属个人）： jQuery 是我最近看到的最好的东西之一。

于 2012-08-24T20:45:14.297 回答
0

尝试使用 Ajax，确保每个包含的内容都可以单独加载，就像使用 iframe 一样。

创建一个内容容器，然后使用 Jquery ajax

$.ajax({
  url: 'targethtml.html',
  success: function(data) {
    $('#containerid').html(data);
  }
});

这就对了。

于 2012-08-24T20:52:20.673 回答
0

这是使用 jquery 库简单显示和隐藏问题的工作示例

于 2012-08-24T21:44:36.263 回答
0

实际上，我认为纯 Ajax 不是这种情况下的最佳解决方案。原因之一是在浏览器中禁用了 javascript 的人将无法浏览您的网站。其次，也许更重要的是，你在搜索引擎上的得分会很差，因为爬虫通常不运行 javascript，因此不会索引你的大部分内容。

我建议您使用一组标准的 html/php 页面。您可以为每个页面上相同的内容创建一个基本页面，例如菜单、页眉、页脚和布局。然后，您可以在此模板中包含每个页面的不同内容，即您现在在内容区域中加载的文本和 html。这可以通过一些服务器端脚本（如 php）轻松完成。这实际上并不难实现，并使您的代码易于维护。拥有实际不同的页面将解决我上面描述的非 js 用户和 SEO 的问题。

设置好这个结构后，你仍然可以按照@Shyju 描述的方式使用ajax，给使用js 的用户带来更好的体验。您必须将菜单中的链接设置为非 js 用户的实际页面，然后您可以按照已经演示的方式用 jQuery 覆盖它们。您所要做的就是让 Ajax 调用获取包含您的页面特定内容的页面。这很容易与您的服务器端脚本用于包含在页面模板中的页面相同

于 2012-08-24T21:45:43.383 回答