如何解决Django Ajax中输入数据时出现HTTP 403错误？

Question

我想实现一个搜索功能来搜索我博客的用户。在我的base.html中，我有我的导航条，在导航条中我有下面的搜索表单。

<form class="form-inline" method="POST">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon1">@</span>
        </div>
        {% csrf_token %}
        <input id="user_search" type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
        <ul class="list-group" id="results"></ul>
    </div>
</form>

我的ajax代码如下:

$('#user_search').keyup(function(){
                $.ajax({
                    type: 'POST',
                    url: "{% url 'user-search' %}",
                    data: $(this).serialize(),
                    dataType: 'json',
                    success: function(response){
                        $('#results').html(response['form']);
                        console.log($('.profile-section').html(response['form']));
                    },
                    error: function(rs, e){
                        console.log(rs.responseText);
                    },
                });
            });

而我的 views.py 搜索视图如下。

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

    users = User.objects.filter(username__icontains=search_text)

    context = {
        'users': users,
    }

    if request.is_ajax():
        html = render_to_string('feed/user_search.html', context, request=request)
        return JsonResponse({'form': html})

而我的相关部分 urls.py 看起来像这样。

path('search/', login_required(views.user_search), name="user-search"),

当在输入字段中输入数据时，我收到了一个403 HTTP错误，说我没有正确使用csrf_token，但是我已经把它包括进去了，因为我以前也这样做过，而且以前的其他时间都能正常工作......任何想法，我如何解决403错误？

Answer 1

我不得不把JS部分改成这样：

$(document).on('keyup', '.user-search-form', function(event){
                event.preventDefault();
                var input = $('#user_search').val();
                console.log(input);
                if (input.length > 2) {
                    $.ajax({
                        type: 'POST',
                        url: $(this).attr('action'),
                        data: $(this).serialize(),
                        dataType: 'json',
                        success: function(response){
                            $('#results').html(response['form']);
                            console.log($('#results').html(response['form']));
                        },
                        error: function(rs, e){
                            console.log(rs.responseText);
                        },
                    });
                }
                else {
                    $('#results').empty();
                }
            });

和python的部分 views.py 像这样。

def user_search(request):
    if request.method == 'POST':
        search_text = request.POST.get('input')

        users = User.objects.filter(username__icontains=search_text)
        context = {
            'users': users,
            }


    if request.is_ajax():
        html = render_to_string('feed/user_search.html', context, request=request)
        return JsonResponse({'form': html})

现在搜索成功了！