Django + Jquery，扩展AJAX div
Posted
技术标签:
【中文标题】Django + Jquery，扩展AJAX div【英文标题】：Django + Jquery, expanding AJAX div 【发布时间】：2010-11-18 03:30:10 【问题描述】：当用户单击链接时，如何在链接下方打开一个 div，通过 AJAX 加载其内容？
感谢您的帮助；我不知道该怎么做。只是在加载页面时静态填充服务器端的 div 工作正常，但它的内容太多了。
如果有人有，我正在寻找特定的 Django 版本的解决方案？
【问题讨论】：
【参考方案1】：这样的事情会起作用
<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>
【讨论】：
【参考方案2】：jQuery.load 正是这样做的：
$("div#my-container").load("/url/to/content/ #content-id")
这会从/url/to/content/ 获取内容，通过#content-id 对其进行过滤并将结果注入div#my-container。
edit：这实际上并没有特定于 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。
【讨论】：
以上是关于Django + Jquery，扩展AJAX div的主要内容，如果未能解决你的问题，请参考以下文章