gpt4 book ai didi

jquery - Django + Jquery,扩展AJAX div

转载 作者:太空狗 更新时间:2023-10-30 01:49:49 24 4
gpt4 key购买 nike

当用户单击链接时,如何在链接下方打开一个通过 AJAX 加载其内容的 div?

感谢您的帮助;我不知道该怎么做。只需在加载页面时静态填充服务器端的 div 即可,但内容太多了。

我正在寻找解决方案的特定 Django 版本(如果有人有的话)?

最佳答案

jQuery.load正是这样做的:

$("div#my-container").load("/url/to/content/ #content-id")

这从 /url/to/content/ 获取内容,通过 #content-id 过滤它并将结果注入(inject) 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 .

关于jquery - Django + Jquery,扩展AJAX div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1252275/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com