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（）創建一個動態內容加載器

回答

相關問題