django - Ajax 实时搜索，我做错了啥？

Posted 2023-02-19

【中文标题】django - Ajax 实时搜索，我做错了啥？

【英文标题】：django - Ajax Live Search, What Am I Doing Wrong?django - Ajax 实时搜索，我做错了什么？

【发布时间】：2018-03-09 01:18:01

【问题描述】：

我正在尝试使用实时搜索功能，只要您在搜索框中输入内容，结果就会自动显示在下方。我一直在关注this tutorial，但没有运气。当我键入查询时，似乎什么也没发生。

谁能告诉我我做错了什么？

urls.py

urlpatterns = [
    url(r'^$', views.list_of_post, name='list_of_post'),
    [...]
    url(r'^search/$', views.search_titles),
]

# this is my blog app views. Original view contains
# url(r'^blog/', include('blog.urls', namespace='blog', app_name='blog')),

views.py

# Main view that displays all my posts

def list_of_post(request):
    post = Post.objects.filter(status='published')
    categories = Category.objects.all()

    template = 'blog/post/list_of_post.html'

    context = 
        'posts': posts,
        'categories': categories,

        [...]
    
    return render(request, template, context)

# View that should return my results?

def search_titles(request):
    if request.method == 'POST':
        search_text = request.POST['search_text']
    else:
        search_text = ''

    classes = Post.objects.filter(title__contains=search_text)

    return render_to_response('blog/ajax_search.html', 'classes': classes)

模板

<h3>Search</h3>
% csrf_token %
<input type="text" id="search" name="search"/>
<ul id="search-results">
</ul>

ajax_search.html

% if classes %
        % for class in classes %
            <p> class.title </p>
        % endfor %
% else %
    <p>No classes found.</p>
% endif %

最后是 ajax.js

$(function() 

    $('#search').keyup(function() 

        $.ajax(
            type: "POST",
            url: "blog/search/",
            data: 
                'search_text' : $('#search').val(),
                'csrfmiddlewaretoken' : $("input[name=csrfmiddlewaretoken]").val()
            ,
            success: searchSuccess,
            dataType: 'html'
        );
    );
);

function searchSuccess(data, textStatus, jqXHR)

    $('#search-results').html(data)

我的所有文件都已正确加载，快速控制台检查确认 ajax.js 和 jquery 正在加载且没有错误。当我在搜索框中输入任何内容时，下方不会出现任何内容。我非常一致地遵循本教程，我看不出我可能哪里出错了。如果有人可以提供帮助，将不胜感激！

【问题讨论】：

你的 Ajax 调用的 url 值可能需要一个前导斜杠：url: "/blog/search/"

我刚试了一下，还是一样的结果，我在搜索框里写什么都没有。

你能用 'search/$' 代替 '^search/$'

试过了，还有很多其他的变种，只是为了确定，没有任何改变

是的，您需要进行一些调试。是否正在进行 Ajax 调用？ Django 收到了吗？它是否被路由到正确的视图？该视图是否返回正确的响应？成功回调是否接收到预期的数据？

【参考方案1】：

你有两个问题：

您需要在 search_title 函数中返回渲染 json。 返回时无法通过django模板标签显示数据 搜索结果模板中的 ajax 请求数据。

关注这篇文章。这真的有效 https://realpython.com/blog/python/django-and-ajax-form-submissions/

【讨论】：

我以前看过那篇文章。问题是，我已经按照 YouTube 上的教程进行操作，他确实做到了，而且效果很好。 cmets 中的其他人报告说它也有效。但由于某种原因，我做错了什么，它不起作用。

【参考方案2】：

问题可能出现在 URL 模式定义中。默认情况下，Django 从上到下解析 URL。所以你可以改变模式从

urlpatterns = [
url(r'^$', views.list_of_post, name='list_of_post'),
[...]
url(r'^search/$', views.search_titles),]

到下面的，然后再试一次。确保在搜索之前没有 URL 具有其他模式和从 URL 获取参数的视图函数。搜索 URL 的首选位置应在第一个 URL 之后。还请交叉检查 head 部分中的 ajax 和 jquery 源文件链接。

urlpatterns = [
url(r'^$', views.list_of_post, name='list_of_post'),
url(r'^search/$', views.search_titles),
[...]
]