使用 JQuery 和 AJAX 在 Django 中刷新 div

Question

我正在尝试使用 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); 替换为$('body').html(data);，它会将整个页面刷新到应有的状态，但我认为刷新整个页面是一种浪费。

如果有更好的方法，请告诉我。

Answer 1

使用load:

$('#tag_cloud').load(' #tag_cloud')

（注意load参数中的前导空格；这指定了一个空字符串[计算结果为当前页面]作为源，“#tag_cloud”作为要加载的片段）

这实际上会将#tag_cloud（包括其外部html）加载到#tag_cloud中，因此您将在DOM中获得以下结构：

<div id="tag_cloud">
    <div id="tag_cloud">
        <span>tag</span> ...

要解决这个问题，只需 unwrap 孩子们：

$('#tag_cloud').load(' #tag_cloud', function(){$(this).children().unwrap()})

---

哦，顺便说一句……你可以在这里试试这个！只需将以下内容粘贴到您的 Firebug 控制台中，然后观看侧边栏自动重新加载。您会注意到一些脚本代码贯穿其中；那是 jQ 的 HTML 安全过滤器为您禁用 <script> 元素（有时可能很烦人）。

$('#sidebar').load(' #sidebar', function(){$(this).children().unwrap()})

Answer 2

首先，您的代码似乎已损坏 - 这不是有效的 Javascript/jQuery 指令：

$('#tag_cloud).html(data);

您需要添加缺少的引号：

$('#tag_cloud').html(data);

至于只刷新一个div，我会将该div 的内容提取到一个单独的模板my_div.html，并使用{% include "my_div.html" %} 将其包含在主页模板中。然后，在我的 AJAX 视图中，我将只呈现并返回呈现的 my_div.html。

Answer 3

在我们的项目中，我们有太多单独的 Ajax 视图，因此编写一个中间件并重用相同的视图是有意义的。我最近创建了一个application，它允许客户端请求任何页面的部分内容。

假设一个页面/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 参数的页面）。

在the BitBucket repo 中，我有一个演示项目，它有一个模块可以自动完成工作。它允许您使用 History.pushState 技巧并加载部分页面并将它们插入到文档中。