Django + Jquery，展开AJAX div

Question

当用户点击一个链接时，我该如何在链接正下方打开一个

，并通过AJAX加载它的内容呢？

谢谢大家的帮助；我找不到方法。虽然在服务器端静态填充这个

在加载页面时可以正常工作，但内容太多了，不适合这样做。

如果有人有特定的Django版本的解决方案，我会很感激！

django ajax jquery 前端交互动态内容加载

2 个回答

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>

回答于 2025-04-15 由 Python大师

分享举报

13

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'}),
)

你可以在这里下载所有代码。

回答于 2025-04-15 由 Python大师

分享举报

Django + Jquery，展开AJAX div

2 个回答

撰写回答