如何在 Django 中使用 QueryString 参数进行 ajax 分页？

Question

我想使用多个 QueryString 参数创建分页，我只使用 Django 创建了常规分页，但是在使用多个 QueryString 创建 Ajax 分页时遇到了问题。

我收到了这个错误： int() 参数必须是字符串、类似字节的对象或数字，而不是 'NoneType'

我的看法：

def products(request):
    products = Products.objects.all()
    if   request.method == 'GET':
                per_page = request.GET.get("option")
                
                
                paginator = Paginator(products, per_page)  # data from get request is not passed properly
                page = request.GET.get('page')
                try:
                    product_list = paginator.page(page)
                except PageNotAnInteger:
                   
                     product_list = paginator.page(1)
                except EmptyPage:
               
                     product_list = paginator.page(paginator.num_pages)
    return render(request, './item/shop.html', {'products': products})

我的Query参数提交html：

<select name="show-product-count" class="form-control" id= "show-product-count">
                                            <option value="9">Show 9</option>
                                            <option value="12" selected="selected">Show 12</option>
                                            <option value="24">Show 24</option>
                                            <option value="36">Show 36</option>
                                        </select>

我的 Ajax/Jquery：

$(document).ready(function () {
 $("#show-product-count").on("change", function(){
    var selectedValue = $(this).val();
  
    $.ajax({
      url : $(this).data('url'),
      type : "GET",
      data : {"option" : selectedValue},
      dataType : "json",
      success : function(){
  
      }
    });
  });



})

Answer 1

您正在使用正文中的数据执行获取请求（甚至不确定是否可能），但您的视图正在检查查询参数。

更改您的 ajax 请求，使其将数据作为查询参数发送：

$(document).ready(function () {
 $("#show-product-count").on("change", function(){
    var selectedValue = $(this).val();
 
    $.ajax({
      url : $(this).data('url')+'?option='+selectedValue,
      type : "GET",
      success : function(){
  
      }
    });
  });
})