javascript - AJAX 数据的控制台日志是我的 html 代码？

Question

我正在尝试通过 ajax 请求传输数据。我想传输输入字段的内容。但是 console.log("ok"+ data) 的输出是 "ok"+ 我所有的 html 代码，尽管 console.log("ok"+ formData) 的输出是我需要的值(value)。

分别在Django View 变量q = None

<input id="search" name="q" type="text" class="form-control" placeholder="Поиск">
<input name='submit_s' id='search_btn' type='button' value='poisk' />

jQuery(document).ready(function($){
    $("#search_btn").click(function () {
        var formData = $('#search').val();
        $.ajax({
            type: "GET",
            url: "search/",
            data: {
                q: formData,
            },
            processData: false,
            dataType: "text",
            cache: false,
            success: function (data) {
                if (data != ''){
                    console.log("ok" + data);
                }
                else {
                    console.log("no");
                }
            },
            failure: function(data){
                console.log("FAIL");
                console.log(data);
            },

        });
    });
});

我的观点.py:

def search(request):
    q = request.GET.get('q')
    print(q) # Output: q = None
    return render(request, 'myapp/new_topic.html', {'q':q} )

Answer 1

您正在使用相同的 View 来呈现页面和 GET ajax 请求。您还将在您的 ajax 请求中获得您的 html 页面。您需要检查您的请求是否是 ajax 请求。您需要执行以下操作:

from django.http import JsonResponse


def search(request):
    q = request.GET.get('q')
    print(q) # Output: q = None
    if request.is_ajax():
        return JsonResponse({'q': q})
    return render(request, 'myapp/new_topic.html', {'q':q} )

来自文档:HttpRequest.is_ajax()

Returns True if the request was made via an XMLHttpRequest, by checking the HTTP_X_REQUESTED_WITH header for the string 'XMLHttpRequest'. Most modern JavaScript libraries send this header.