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

发布于 2024-08-25 17:05:34 字数 672 浏览 2 评论 0原文

（你好尼克博士）:) 所以我昨天发布了一个关于 jQuery 内容加载器插件的问题，我想我会使用它，但没有让它工作。

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

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

烟酉 2024-09-01 17:05:34

尝试这个独立的小示例

<?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=某物。脚本的 php 部分使用 isset() 测试是否设置了此类参数。如果有，则测试是否有与该 contentId 关联的数据。该示例使用（静态）数组来实现此目的，但它可以是任何东西。

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

Try this little self-contained example

<?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>

The "important" part is that it passes the object {'contentId':contentID} to .load(), i.e. the request will contain a (post) parameter contentId=something. The php part of the script tests whether such a parameter is set or not using isset(). If there is, it tests whether it is has data associated with this contentId. The example uses a (static) array for this but it could be just anything.

This has some drawbacks. E.g. the browser doesn't cache the contents. Every time a button is hit data has to be sent forth and back between the server and the client. But you could use something like mod\rewrite or similar to let your php script react on urls like http://someserver/getContents/contentIdA , http://someserver/getContents/contentIdB, http://someserver/getContents/contentIdC and so on.

回复收藏 0 原文

~没有更多了~