使用JQuery和AJAX刷新Django中的div [英] Refresh a div in Django using JQuery and AJAX

问题描述

我正在使用AJAX和JQuery（在Django中）刷新页面的某一部分。如何获得它只重新显示div，而不是整个页面。

  //在我的模板
 var tag_cloud_floor = function（floor）{
 $ .ajax（{url：/ {{user}} / {{tag}} /，
 data：{tag_cloud_floor：floor}，
类型：'POST'，
 success：function（data）{
 $（'＃tag_cloud）.html（data）; 
}，
}）; 
 
}; 
  

这是我的观点。

  @login_required 
 def tag_page（request，username，tag）：
如果用户名== request.user.username：
 tags = request.user.userprofile。 tag_set.all（）
 
如果request.is_ajax（）和request.POST：
 floored_tags = [] 
标签中的t：
如果t.item_set。 all（）。count（）> = int（request.POST ['tag_cloud_floor']）：
 floored_tags.append（t）
标签= floored_tags 
 
标签=标签.objects.get（title = tag）
 items = tag.item_set.all（）
返回render_to_response（tag_page.html，{'user'：request.user，
'标签'：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） code>它会刷新整个页面，它应该是如何，但我认为刷新整个页面是一种浪费。

如果有更好的方法做这个，让我知道。

解决方案

首先，看起来你的代码坏了 - 这不是一个有效的Javascript / jQuery指令：

  $（'＃tag_cloud）.html（data）; 
  

您需要添加缺少的报价：

< 。pre> $（ '＃tag_cloud'）的html（数据）;


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

I am trying to refresh a certain part of my page with AJAX and JQuery (in Django). How can I get it to redisplay only the div, rather than the whole page.

    // 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);
                     },
    });

};

Here is my view.

@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 + '/')

Currently, it places the entire html page into the #tag_page div. I want it to replace the old #tag_page div with the new #tag_page div. If I replace $('#tag_cloud').html(data); with $('body').html(data); it refreshes the whole page to how it should be, but I figure refreshing the whole page is a waste.

If there is a better way to do this, let me know.

解决方案

First, it looks like your code is broken - this is not a valid Javascript/jQuery instruction:

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

You need to add the missing quote:

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

As for refreshing only a single div, I would extract contents of that div to a separate template my_div.html, include it in the main page template using {% include "my_div.html" %}. Then, in my AJAX view, I would render and return only that rendered my_div.html.

这篇关于使用JQuery和AJAX刷新Django中的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！