jquery - 使用 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 children :

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

<小时/>

哦，顺便说一句...你可以在这里尝试一下!只需将以下内容粘贴到您的 Firebug 控制台中，然后观察侧边栏自动重新加载。您会注意到一些脚本代码出现；这是 jQ 的 HTML 安全过滤器禁用 <script>适合您的元素(有时可能会很烦人)。

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