jQuery - 使用 $.get() 创建动态内容加载器答案

【问题标题】：jQuery - Creating a dynamic content loader using $.get()jQuery - 使用 $.get() 创建动态内容加载器
【发布时间】：2010-03-19 06:26:49
【问题描述】：

(hello dr.Nick) :) 所以我昨天发布了一个关于 jQuery 内容加载器插件的问题，我以为我会使用它，但没有让它工作。

jQuery - Could use a little help with a content loader

虽然它现在可以工作，但我看到了它的一些缺点。它需要内容所在的文件的堆加载。由于代码本质上是在 href 链接中获取 url 并在该文件中搜索名为 #content 的 div

我真正想做的是收集所有这些文件都放在一个文件中，并为每个 div/container 提供唯一的 ID，然后从中获取内容。所以我不需要那么多单独的文件。

Nick Craver 认为我应该使用 $.get()，因为它有一个下降回调。但是我在js方面根本没有那么强。。我什至不知道这意味着什么。我基本上习惯了 Visual Basic 和参数传递，存储在 txt 文件等。这真的不适合这个目的。

那么做这种事情的“正常”方式是什么？我很确定我不是唯一一个想到这个的人吗？我基本上想从一个包含许多具有唯一 ID 的 div 的单个 php 文件中获取内容。不用太多麻烦，淡出我主页中的现有内容，从另一个文件中提取内容并将其淡入我的主页。

【问题讨论】：

标签： php jquery html jquery-plugins get

【解决方案1】：

试试这个独立的小例子

<?php
if ( isset($_POST['contentId']) ) {
  // a contentId parameter has been sent
  // "we" know these ids:
  $contents = array(
    'a'=>'Mary had a little lamb',
    'b'=>'whose fleece was white as snow',
    'c'=>'And everywhere that Mary went',
    'd'=>'the lamb was sure to go'
  );
  // if we know the contentId
  if ( isset($contents[$_POST['contentId']]) ) {
    // send back the data associated with the contentId
    echo $contents[$_POST['contentId']];
  }
  else {
    echo 'unknown contentID';
  }
  die;
}

// if no contentId parameter has been sent at all, send the html document
?>
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
      function foo(contentID) {
        $('#container').hide('fast', function() {
          $('#container').load('?', {'contentId':contentID}, function() {
            $('#container').show('normal');
          });
        });    
      }
    </script>
  </head>
  <body>
    <fieldset>
      <button onclick="foo('a')">load content A</button>
      <button onclick="foo('b')">load content B</button>
      <button onclick="foo('c')">load content C</button>
      <button onclick="foo('d')">load content D</button>
     </fieldset>
    <div id="container">Hello.</div>
  </body>
</html>

“重要”部分是它将对象{'contentId':contentID} 传递给.load()，即请求将包含（发布）参数contentId=something。脚本的 php 部分使用 isset() 测试是否设置了此类参数。如果有，则测试是否有与此 contentId 关联的数据。该示例为此使用（静态）数组，但它可以是任何东西。

这有一些缺点。例如。浏览器不缓存内容。每次点击按钮时，都必须在服务器和客户端之间来回发送数据。但是你可以使用 mod\rewrite 或类似的东西来让你的 php 脚本对http://someserver/getContents/contentIdA、http://someserver/getContents/contentIdB、http://someserver/getContents/contentIdC 等 URL 做出反应。

【讨论】：

抱歉回复晚了！代码看起来不错 :) 认为我会像这样使用它，也许在这里和那里做一些调整 :) 看到你正在从 googleapis 加载 jQuery。这是一种常见的做法吗？是否也包括缓动？
我使用 googleapis 制作了一个可复制粘贴的示例。但它也有一些优点，例如它可能已经在浏览器缓存中。 Stackoverflow 用户，例如目前在他们的缓存中有 ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js ;-)