如何解决在 django 中显示 ajax 搜索结果的问题？答案

【问题标题】：how can i resolve the issue in displaying the ajax search results in django?如何解决在 django 中显示 ajax 搜索结果的问题？
【发布时间】：2021-09-17 16:36:35
【问题描述】：

问题结果正在由 ajax 搜索功能检索，但是当我使用 $(selector).htm(data) 显示在选择器中检索到的数据时，它会在整个页面中加载一个具有正确搜索结果的页面。 为了更好地理解，下面附上了我从该代码中得到的屏幕截图。

$('#searchsubmit').on('click', function(e){
        e.preventDefault();
        q = $('#search').val();
        console.log(q);
        updateContentBySearch(q);
  });
function updateContentBySearch(q) {
    var data = {};
    data['search_by'] = q
    // data["csrfmiddlewaretoken"] = $('#searchform [name="csrfmiddlewaretoken"]').val();
    $.ajax({
        method: 'POST',
        url: "{% url 'main:Search' %}",
        data: {
          'search_by': q,
          'csrfmiddlewaretoken' : $("input[name=csrfmiddlewaretoken]").val()
        },
        success: function (data) {
          searchSuccess(data)
        }
      });

    }
    function searchSuccess(data, textStatus,jqXHR)
    {
      $('#search-results').html(data);
    }

HTML

<div class="row">
  <div class="row justify-content-center" style="text-align:center">
    <form class="d-flex col-md-6" id="searchform" method="POST">
      {% csrf_token %}
     <div class="input-group mb-3" style="text-align:center">
    <input name="q" type="text" class="form-control" placeholder="Search" id="search">
    <button class="btn btn-primary shadow px-5 py-2" type="submit" id="searchsubmit">Search</button>
     </div>
  </form>
  </div>
  <hr style="border-top: 1px solid #ccc; background: transparent;">
  <div class="row"  id="search-results">
  {% regroup transaction by productID as ProductList %}
  {% for productID in ProductList %}
 ///some code 

</div>
  {% endfor %}

</div>

观看次数

@csrf_exempt
def search(request):
    q = request.POST.get('search_by')
    print(q)
    product = Products.objects.all()
    cart_product_form = CartAddProductForm()
    transaction = transactions.objects.filter(productID__name__icontains=q,status='Enable').order_by('productID')
    print(transaction)
    context={
        'products':product,
        'transaction': transaction,
        'cart_product_form':cart_product_form
    }
    html = render_to_string('main/home.html',context)

    return JsonResponse(html,safe=False , content_type="application/json")

屏幕截图

现在，在这个屏幕截图中，您可以看到它向我显示了两个横幅和搜索栏，然后显示搜索结果中的产品。就像它在页面中从选择器中再次加载整个页面一样，我也传递了数据。

有人知道如何解决此问题或我做错了什么吗？

【问题讨论】：

标签： javascript html django ajax django-views

【解决方案1】：

因为你渲染了 'main/home.html' agin ！您只需要使用您的 context 数据发送一个 json 响应，然后使用 JS 将其添加到网页中，或者创建一个新的 html 模板并使用您的上下文数据呈现它并将其作为响应发送！

【讨论】：

我不想将页面定向到另一个页面或重新加载页面