如何在用戶點擊鏈接時在鏈接下方打開一個div,然後通過AJAX加載內容?Django + Jquery,擴展AJAX div
感謝您的幫助;我無法找到如何。只要在加載頁面時靜態填充服務器端的div就可以正常工作,但它的內容太多了。
我很尋找特定的Django版本的解決方案,如果任何人有一個?
如何在用戶點擊鏈接時在鏈接下方打開一個div,然後通過AJAX加載內容?Django + Jquery,擴展AJAX div
感謝您的幫助;我無法找到如何。只要在加載頁面時靜態填充服務器端的div就可以正常工作,但它的內容太多了。
我很尋找特定的Django版本的解決方案,如果任何人有一個?
jQuery.load正是這麼做的:
$("div#my-container").load("/url/to/content/ #content-id")
此獲取從/url/to/content/
內容,通過#content-id
對其過濾和結果注入到div#my-container
。
編輯:真的沒有什麼特別的Django,因爲它都是客戶端。但是,如果你堅持......
templates/base.html
<html>
<head>
<title>My funky example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
{% block extrahead %}{% endblock %}
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
templates/page.html
{% extends "base.html" %}
{% block extrahead %}
<script type="text/javascript">
$(function(){
$('a.extendable').click(function(){
$(this).after($('<div class="external-content"></div>').load($(this).attr('href') + ' #content'));
return false;
});
});
</script>
{% endblock extrahead %}
{% block content %}
<p>Hi! <a href="/external/content/a/" class="extendable">Click here</a> and wait for something funny to happen!</p>
<p><a href="/external/content/b/" class="extendable">This link</a> is cool, too!</p>
{% endblock content %}
templates/a.html
{% extends "base.html" %}
{% block content %}
<div id="content">so long and thanks for all the fish</div>
{% endblock %}
templates/b.html
{% extends "base.html" %}
{% block content %}
<div id="content">Don't panic</div>
{% endblock %}
urls.py
from django.conf.urls.defaults import *
urlpatterns = patterns('django.views.generic.simple',
(r'^$', 'direct_to_template', {'template': 'page.html'}),
(r'^external/content/a/$', 'direct_to_template', {'template': 'a.html'}),
(r'^external/content/b/$', 'direct_to_template', {'template': 'b.html'}),
)
您可以下載所有的代碼here。
像這樣的事情會工作
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function loadDiv() {
$.get("test.php", function(data){
$('#thediv').html(data);
});
}
</script>
</head>
<body>
<a href="javascript:loadDiv();">Load Div</a>
<div id="thediv"></div>
</body>
</html>