使用JQuery和AJAX在Django中刷新div
我试图用AJAX和JQuery（在Django中）刷新页面的某个部分。 我怎样才能让它只重新显示div而不是整个页面。
// In my template var tag_cloud_floor = function(floor) { $.ajax({ url: "/{{ user }}/{{ tag }}/", data: {tag_cloud_floor: floor}, type: 'POST', success: function(data) { $('#tag_cloud).html(data); }, }); }; 这是我的看法。
@login_required def tag_page(request, username, tag): if username == request.user.username: tags = request.user.userprofile.tag_set.all() if request.is_ajax() and request.POST: floored_tags = [] for t in tags: if t.item_set.all().count() >= int(request.POST['tag_cloud_floor']): floored_tags.append(t) tags = floored_tags tag = Tag.objects.get(title=tag) items = tag.item_set.all() return render_to_response("tag_page.html", { 'user': request.user , 'tag': tag, 'tags': tags, 'items': items }) else: return HttpResponseRedirect('/' + request.user.username + '/')
目前，它将整个html页面放入#tag_page div。 我希望它用新的#tag_page div替换旧的#tag_page div。 如果我替换$('#tag_cloud').html(data); with $('body').html(data); 它刷新整个页面应该如何，但我觉得刷新整个页面是一种浪费。
如果有更好的方法，请告诉我。
首先，看起来你的代码坏了 – 这不是一个有效的Javascript / jQuery指令：
$('#tag_cloud).html(data);
您需要添加缺少的引用：
$('#tag_cloud').html(data);
至于只刷新一个div ，我会将该div的内容提取到单独的模板my_div.html ，使用{% include "my_div.html" %}将其包含在主页面模板中。 然后，在我的AJAX视图中，我将渲染并仅返回渲染my_div.html 。
使用负载 ：
$('#tag_cloud').load(' #tag_cloud')
（注意load参数中的前导空格;这指定一个空字符串[评估到当前页面]作为源，并将“#tag_cloud”指定为要加载的片段）
这实际上会将#tag_cloud（包括其外部html）加载到#tag_cloud中，因此您基本上会在DOM中获得以下结构：
tag ...
要解决这个问题，只需unwrap孩子：
$('#tag_cloud').load(' #tag_cloud', function(){$(this).children().unwrap()})
哦，顺便说一句……你可以在这里尝试这个！ 只需将以下内容粘贴到Firebug控制台中，然后观看侧边栏自动重新加载即可。 你会注意到一些脚本代码在探索; 这是jQ的HTML安全filter为您禁用元素（有时可能很烦人）。
$('#sidebar').load(' #sidebar', function(){$(this).children().unwrap()})
在我们的项目中，我们有太多单独的Ajax视图，编写中间件并重用相同的视图是有意义的。 我最近创建了一个应用程序 ，让客户端请求任何页面的部分内容。
比方说，page /usual_page/有这个模板：
{% extends "another_template.html" %} {% block title %}Usual page{% endblock %} {% block content %}...{% endblock %} {% block my_widget %}widget code{% endblock %}
如果您安装中间件并发出类似/usual_page/?partial=my_widget的GET请求，它将向客户端发送此数据：
{"blocks": {"my_widget": "widget code"}}
或者，如果您执行/usual_page/?partial=title,content ，它将发送以下内容：
{"blocks": {"title": "Usual page", "content": "..."}}
也可以请求父模板中的其他块。 块在层次结构中的位置并不重要，只关注它存在于普通页面中（没有?partial参数的页面）。
在BitBucket仓库中 ，我有一个演示项目，其中包含一个可自动完成工作的模块。 它允许您使用History.pushState技巧并加载页面的一部分并将它们插入到文档中。