如何編寫將HTML加載到兩個不同DIV中的AJAX函數？

我正在使用Django和AJAX構建一個活動源的項目。它的工作方式是顯示朋友活動和全球活動。這是我的HTML是什麼樣子：如何編寫將HTML加載到兩個不同DIV中的AJAX函數？

<div> 
    {% include "friend_reviews.html" %} 
    <div id="load-friends"></div> 
</div> 
<div> 
    {% include "global_reviews.html" %} 
    <div id="load-global"></div> 
</div> 
<a id="load-more" href="/load/feed/2"> 
    Load More 
</a>

我想寫一個jQuery AJAX功能，將載入更多評論到＃負載的朋友和＃負荷全球。因此，我寫Django視圖（其攔截/負荷/飼料/ 2）查詢數據庫，並返回：

context = {'friend_reviews': friend_reviews, 'global_reviews': global_reviews'}

兩個friend_reviews和global_reviews是審查對象的查詢集。如果您將friend_reviews插入到friends_reviews.html部分模板中，則會在頁面上生成適當的HTML。

但是，我不熟悉jQuery，不知道什麼是生成正確的HTML的最佳方式。我聽說過Taconite，但在Python中沒有例子，所以任何幫助將不勝感激。

來源

2012-02-18 ArKitect

想要更多地瞭解您的離線活動Feed項目。 – Mafuba 2014-02-15 04:52:31

將jquery庫包含在頁面頭部。如果您在使用jQuery

$(document).ready(function(){ 
    $.get("friend_reviews.html",function(data){  
      $('#load-friends').html(data); 
     }); 
    $.get("global_reviews.html",function(data){  
      $('#load-global').html(data); 
     }); 
});

如果你想通過點擊鏈接來做到這一點，那麼你可以使用以下

// html 
<a id="load-more">Load More</a> 

// Javascript 
$(document).ready(function(){ 
    $('#load-more').click(function(){ 
    $.get("friend_reviews.html",function(data){  
      $('#load-friends').html(data); 
     }); 
    $.get("global_reviews.html",function(data){  
      $('#load-global').html(data); 
     }); 
            }); 
});

來源

2012-02-18 04:34:07 Valky

我想你錯過了'＃'。 – xyz 2012-02-18 04:40:39

是的，我很累...謝謝... – Valky 2012-02-18 04:42:54

則是：

那麼，這將做的工作使用$（selector）.load（url）更簡單。

$(document).ready(function(){ 
    $('#load-more').click(function(){ 
    $('#load-friends').load("friend_reviews.html"); 
    $('#load-global').load("global_reviews.html"); 
    return false; 
    }); 
});

這將是更有效的由具有/裝載/進料返回你在一個（Ajax的）請求所需要的一切/ 2呈現含有所需的HTML JSON。

創建/負載/飼料/ 2視圖返回JSON：

context = {'friend_reviews': friend_reviews, 'global_reviews': global_reviews} 
response_data = {'friend_reviews': render_to_string('friend_reviews.html', context), 
       'global_reviews': render_to_string('global_reviews.html', context)} 

return HttpResponse(json.dumps(response_data), mimetype="application/json")

然後你的JavaScript可能是：

$(document).ready(function(){ 
    $('#load-more').click(function(){ 
    $.getJSON($(this).attr('href'), function (data) { 
     $('#load-friends').html(data.friend_reviews); 
     $('#load-global').html(data.global_reviews); 
     }); 

    return false; 
    }); 
});

您需要照顧您的URL（/負載/飼料/ 2）現在呈現JSON，所以如果您需要或希望它仍然呈現HTML，您可能需要爲JSON添加新網址。

來源

2012-02-18 14:58:57

如何編寫將HTML加載到兩個不同DIV中的AJAX函數？

回答

相關問題