Django AJAX 搜索功能答案

【问题标题】：Django AJAX search functionDjango AJAX 搜索功能
【发布时间】：2016-10-07 21:48:51
【问题描述】：

我正在尝试使用 AJAX 在我的 Django 项目中创建搜索功能。但是views.py 中的功能似乎不能正常工作。也许我还有其他一些错误。你能告诉我我需要纠正什么吗？

这是我的 AJAX 文件：

$(document).ready( function(){
$('#suggestion').keyup(function(){
    var query;
    query = $(this).val();
    $.get('/friends_plans/suggest_users/', {suggestion: query},   function(data){
        $('#user').html(data);
    });
});
});

这是我模板的一部分：

<div>
<ul class="nav nav-list">
   <li class="nav-header">Find user</li>
   <form>
      <li><input class="search-query span10" type="text" name="suggestion" value=" " id="suggestion" /></li>
   </form>
</ul>
</div>
<div id="user">
</div>

views.py 中的这些 ara 函数：

def suggest_users(request):
users_list = []
starts_with = ''
if request.method == 'GET':
    starts_with = request.GET['suggestion']
users_list = get_users_list(5, starts_with)
return render(request, 'friends_plans/list.html', {'users_list': users_list})

def get_users_list(max_results=0, starts_with=''):
users_list = []
if starts_with:
    users_list = Person.objects.filter(username__istartswith=starts_with)
if max_results > 0:
    if len(users_list) > 0:
        users_list = users_list[:max_results]
return users_list

这是来自 urls.py:

url(r'^suggest_users/$', views.suggest_users, name='suggest_users')

istartswith 方法不适用于变量，但适用于常量，我不明白为什么。并且suggest_users 函数不会将users_list 返回到ID 为user ($('#user').html(data)) 的对象，页面上不会出现任何内容。但也许还有其他一些错误。

【问题讨论】：

看起来您在 get 上发布数据，不知道您为什么要这样做。检查浏览器控制台，假设您处于调试模式，它将返回服务器发回的错误。我会从那里开始。如果您发布数据，您需要传递用于防止跨站点伪造的 csrf-token。在 Django 的网站上有关于此的文档。
克里斯，OP 正在使用完全正常的 get 请求发送数据。该网址最终将类似于http://foo.com/resource?foo=bar
这不是有效的 python 代码。如果您对获得帮助和学习非常感兴趣，请遵守有关缩进的最低规则。

标签： python ajax django django-templates django-views

【解决方案1】：

Django 的render 函数在使用 Jinja 解析 HTML 后呈现 HTML。如果您想编写一个充当 AJAX 函数端点的视图，您不希望该视图返回 render。

您应该使用 return JsonResponse。 JsonResponse 接受字典作为参数。它会为你构建一个合适的 JSON 对象。 :) 然后你的 AJAX 的成功函数会拾取它。

这是一个如何使用JsonResponse的例子：

from django.http import JsonResponse

def some_endpoint(request, *args, **kwargs):
    data = dict()
    data["foo"] = "bar"
    data["username"] = User.objects.get(id=request["id"]).username
    return JsonResponse(data)

这将导致您的视图返回 JSON Object，这是您的 AJAX 函数正在寻找的内容。

我提出的第二个建议是使用 jQuery 的 $.ajax() 函数而不是 jQuery 的快捷方式 .get() 函数。这样做的好处是学习所有与 AJAX 调用相关的参数。

这是 jQuery 的 $.ajax() 函数的示例。

$(document).ready( function(){
    $('#suggestion').keyup(function(){
        var query = $(this).val();
        $.ajax(function(){
            type: "GET",
            url: "/friends_plans/suggest_users/",
            data: {suggestion: query},
            success: function(data){
                console.log("SUCCESS");
                console.log(data);
            },
            failure: function(data){
                console.log("FAIL");
                console.log(data);
            },
        });
    });
});

【讨论】：