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

时间:2010-03-19 06:26:49

标签: php jquery html jquery-plugins get

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

jQuery - Could use a little help with a content loader

虽然它现在有用,但我看到它有些缺点。它需要内容所在的文件的堆加载。由于代码实际上是在href链接中获取url并在该文件中搜索名为#content的div,所以我真的想要做的是将所有这些文件收集到一个文件中,并为每个div /容器提供它唯一的ID,然后从中获取内容。所以我不需要这么多单独的文件。

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

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

1 个答案:

答案 0 :(得分: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(),即请求将包含(post)参数contentId = something。脚本的php部分使用isset()测试是否设置了这样的参数。如果有,则测试它是否具有与此contentId相关联的数据。该示例使用(静态)数组,但它可以是任何东西。

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