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

Posted 2023-03-31

【中文标题】如何解决在 Django Ajax 中输入数据时出现 HTTP 403 错误？

【英文标题】：How to solve HTTP 403 error on input of data in Django Ajax?

【发布时间】：2020-10-04 04:55:32

【问题描述】：

我正在尝试实现搜索功能来搜索我博客的用户。在我的 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 错误吗？

【问题讨论】：

添加 csrf 令牌或免除 csrf 令牌。

你这是什么意思？我应该从我的 html 中删除 csrf_token 吗？或者我应该在哪里添加另一个，因为我的表单中已经有一个 csrf_token

检查发送到后端的数据，检查是否是 csrf 令牌。不是那么您必须更新 ajax 请求数据以考虑 csrf_token。

我检查了数据并将令牌发送到后端，在我的控制台中它说：Forbidden (CSRF token missing or incorrect.): /feed/search/ 所以我认为 csrf 令牌一定是不正确的。我该如何纠正它？

在 keyup 事件中检查查询的长度，如果它小于所需的最小长度（例如 3），则不要查询后端。此外，您可能必须清除显示长度变为

【参考方案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();
                
            );

views.py 中的 python 部分是这样的：

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)

现在搜索成功了！