jQuery - 使用$ .get（）创建一个动态内容加载器

（hello dr.Nick）:)所以我昨天发布了一个关于jQuery的内容加载器插件的问题，我想我会用它，但没有得到它上班。

jQuery - Could use a little help with a content loader

虽然现在的工作，我看到一些缺点吧。它需要大量内容所在的文件。由于代码基本上会在href链接中搜索url并在该文件中搜索调用的div #content

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

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

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

来源

2010-03-19 Kenny Bones

尝试这个小自包含例如

<?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）参数内容识别=东西。脚本的php部分测试是否使用isset（）设置了这样的参数。如果存在，它会测试它是否具有与此contentId相关联的数据。该示例为此使用（静态）数组，但它可能只是任何东西。

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

来源

2010-03-19 07:05:58 VolkerK

对不起，回复迟！代码看起来不错:)想想我会这样使用它，也许在这里和那里做一些调整:) 看到你正在从googleapis加载jQuery。这是做这件事的常见方式吗？它是否也包括缓解？ – 2010-03-22 05:59:48

我用googleapis来制作一个复制和可移动的例子。但它也有一些优点，例如它可能已经在浏览器缓存中。 Stackoverflow用户，例如目前在其缓存中有ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js ;-) – VolkerK 2010-03-22 07:03:35

jQuery - 使用$ .get（）创建一个动态内容加载器

回答

相关问题