wagtail/Django 标题中的 Ajax 实时搜索

Question

我最近刚刚开始学习Python、Wagtail 和Django。 需要在网站标题中创建实时搜索，但我无法让它正常工作；作为搜索结果，将加载包含搜索结果的整个页面。

这是我投入大量精力的代码：

在 header.html 中：

<div class="block_search">
<input type="text" class="search_input searchbox"  id="search_header" value="" placeholder="Поиск товара..." name="q"  >
{% include "tags/header_search.html" %}
</div>
        

header_search.html：

{% load static wagtailcore_tags header_tags %}

<div id="search_box-result">
    {% get_header_search as search_result%}
    {% for result in search_result %}
    {{result.title}}
    {% endfor %}
</div>

Jquery：

<script>
        
                $(document).ready(function () {
                    $('#search_header').on('input',function(e){
                        var search_result = $("#search_header").val();
                        $.ajax({
                            type: 'GET',
                            cache: true,
                            url: '',
                            data: {"search": search_result},
                            success: function (response) {
                                $("#search_box-result").replaceWith(response)
                            }
                        });
                    });
                    
                    
                });
</script>

header_tags.py：

@register.simple_tag(takes_context=True)
def get_header_search(context):
    request = context['request']
    if request.method == 'GET':
        search_query = request.GET.get("search", None)
        print(search_query)
        if search_query:
            search_results = Page.objects.live().search(search_query)
        else:
            search_results = Page.objects.none()
        return search_results

`在浏览器中： 在此输入图片描述

在此输入图片描述

Answer 1

我认为您需要一种方法来识别 ajax 调用或来自浏览器的用户调用在哪里。我也想要那个。考虑到 ajax 和用户浏览器请求之间有什么区别，我发现了此链接 当我可以区分这些调用时，我编写了以下代码：

def is_ajax(request):
  if(request.headers.get('SEC_FETCH_SITE') == "same-origin"):
    return True
  return False    

class Model(Page):
  description = models.CharField(max_length=511)
  def get_template(self, request):
    if is_ajax(request):
      return "base/model_ajax.html"
    return "base/model_page.html"

当你查找 get_header_search 标签时，你可以区分它是否是 ajax。也许当它是ajax时，您可以使用另一个模板或JsonResponse，当不是时，您可以加载不同的模板。

当您通过 ajax 请求时，您需要一个 URL，wagtail 中的 url 可以是 Wagtail API 语法，也可以只是可以使用 django 上下文处理器呈现的静态 url。就我而言，它是在模板内呈现的静态 URL，当我单击它时，我会专门针对模板对文档进行 ajax 调用，而当它不是 .我只是放了一个普通的模板。

希望有帮助。