Question

我正在尝试建立一个在线商店，并且我试图让最终用户能够在新商品，旧商品或所有商品之间进行过滤。我相信我现在设置的方式是，当点击过滤器时，它会发送一个AJAX GET请求，然后在另一个查询中加载。我遇到的问题是，当我点击任何这些过滤器时，页面会闪烁，我可以在控制台中看到20-30 GET请求。偶尔它只会做1 GET请求，所以我不确定发生了什么。我想弄清楚是什么导致了这个问题，以及它是在我的jQuery还是在我的Django视图中。

TEMPLATE

//DISPLAYING EACH ITEM FOR SALE

{% for i in latest_entries %}
<li>
    <div class="grid_4">
        <div class="item_for_sale">
            <img src="{{ i.item_picture.url }}" alt="" />
            <div class="overlayname">{{ i.headline }}</div>
            <div class="overlayprice">{{ i.price1 }}</div>
        </div>
        <div class="posted">Posted {{ i.pub_date|timesince|',' }} ago</div>
    </div>
</li>
{% endfor %}


//DROP DOWN MENU TO CHOOSE FILTER

<ul class="filterlist">
    <li>
    Type
    <ul class="filterlist">
      <li><a href="" id='used'>Used</a></li>
      <li><a href="" id='new'>New</a></li>
      <li><a href="" id='strains1'>All</a></li>
    </ul>
    </li>
</ul>


//SCRIPT TO REPOPULATE GRID WHEN FILTER IS SELECTED

<script>
function filter(type) {
  $.get("/storefront/?filter="+type, function(data) {
     $('.grid').children().remove();
     $(data).appendTo('.grid');
  });
}

$("#used").click(function () { 
  filter("used");
});

$("#new").click(function () { 
  filter("new");
  return false;
});

$("#all").click(function () { 
  filter("all");
  return false;
});
</script>

视图

def storefront(request):
    latest_entries = Entry.objects.order_by('-pub_date')[:16]
    context = {'latest_entries': latest_entries}

    if request.is_ajax():
        if request.GET.get('filter') == 'used':
            latest_entries = Entry.objects.filter(entrytype=1)
            context = {'latest_entries': latest_entries}
            return render(request, 'storefrontload.html', context)
        if request.GET.get('filter') == 'new':
            latest_entries = Entry.objects.filter(entrytype=2)
            context = {'latest_entries': latest_entries}
            return render(request, 'storefrontload.html', context)
        if request.GET.get('filter') == 'all':
            latest_entries = Entry.objects.filter(entrytype=3)
            context = {'latest_entries': latest_entries}
            return render(request, 'storefrontload.html', context)
    return render(request, 'storefront.html', context)

我有另一个问题（可能是相关的），一旦我点击过滤器，项目加载到页面上，但网格看起来比它应该高200px。换句话说，如果我加载页面，待售商品的网格定位完美，但是当我点击过滤器时，网格似乎向上移动大约200px并且看起来非常难看。我无法弄清楚原因。

Answer 1

显然，每次点击过滤器时，它都会翻倍。因此，在第5次点击后，它将发送32个GET请求。使用＆＃39;返回false＆＃39;并没有阻止这种情况发生，所以在阅读了其他一些SO帖子之后，我试过了：

$("#new").unbind()click(function () { 
  filter("new");
});

这很有效，不过我的网格在加载新项目后仍然会失去它的位置，我很确定它与masonry.js有关，所以我创建了一个新帖子试图找出那个问题。

为什么我的AJAX请求在Django Console中发送30个GET请求？

1 个答案: