使用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

使用负载:

$('#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.