python - Django AJAX 搜索功能

Question

我正在尝试使用 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 ))，页面上什么也没有出现。但也许还有其他一些错误。

Answer 1

Django 的 render 函数在使用 Jinja 解析后呈现 HTML。如果您想编写一个充当 AJAX 函数端点的 View ，您不希望该 View 返回 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)

这将导致您的 View 返回一个 JSON 对象，这正是您的 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);
            },
        });
    });
});