为什么我的 AJAX 请求在 Django 控制台中发送了 30 个 GET 请求？

Question

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

模板

//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)

我遇到了另一个问题（可能相关），我一单击过滤器，项目就会加载到页面上，但网格似乎比应有的高 200 像素。换句话说，如果我加载页面，待售商品的网格定位完美，但当我单击过滤器时，网格似乎向上移动了大约 200 像素，看起来非常难看。我不明白为什么。

Answer 1

显然每次我点击一个过滤器，它都会加倍。所以在第 5 次点击后它会发送 32 个 GET 请求。使用 'return false' 并没有阻止这种情况的发生，所以在阅读了其他一些 SO post 之后，我尝试了：

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

这行得通，但是我的网格在加载新项目后仍然失去了定位，我很确定它与 masonry.js 有关，所以我正在创建一个新的 post试着找出那个问题。

为什么我的 AJAX 请求在 Django 控制台中发送了 30 个 GET 请求？

Why is my AJAX request sending 30 GET requests in Django Console?

django

ajax

jquery