Django AJAX搜索功能

时间:2016-06-07 20:28:55

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

我正在尝试使用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>

这些ara函数来自views.py:

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))的对象,页面上不会显示任何内容。但也许还有其他一些错误。

1 个答案:

答案 0 :(得分:1)

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

相反,您应该使用return JsonResponseJsonResponse接受字典作为参数。它为您构建了一个合适的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);
            },
        });
    });
});