XMLHttpRequest.send(data)无法向Django视图传递数据的问题排查

嘿，我来帮你排查这个问题！你遇到的核心问题是没有正确处理XHR请求中数据的传递规则，不管是GET还是POST，都有对应的格式和要求需要遵守，咱们一步步来修复：

问题1：GET请求的参数传递错误 #

首先要明确：GET请求的参数是直接拼接在URL的查询字符串里的，而不是通过xhr.send()发送——send()方法的参数在GET请求里会被浏览器直接忽略，这就是为什么你的request.GET是空的。

修复后的GET版本JS代码 #

addListenerMulti(query, "propertychange change click keyup input paste", function () {
    if (query.value != oldVal) {
        oldVal = query.value;
        // 用URLSearchParams自动处理参数编码和拼接
        const queryParams = new URLSearchParams({
            "query_so_far": query.value,
            "search_context": document.getElementById("filter").value
        });
        try {
            const xhr = new XMLHttpRequest();
            // 把查询字符串拼到目标URL末尾
            xhr.open("GET", 'url-for-view-function?' + queryParams.toString());
            xhr.onload = function () {
                if (xhr.status === 200) {
                    console.log(xhr.response);
                } else if (xhr.status === 500) {
                    console.log(xhr.response);
                }
            }
            // GET请求只需send(null)或空参数即可
            xhr.send(null);
        } catch (e) {
            console.log(e);
        }
    }
})

对应的Django视图处理 #

此时你可以直接通过request.GET获取参数：

from django.http import JsonResponse

def autocomplete_view(request):
    if request.method == 'GET':
        query_so_far = request.GET.get('query_so_far', '')
        search_context = request.GET.get('search_context', '')
        # 这里执行你的模型过滤逻辑...
        return JsonResponse({"results": ["建议1", "建议2"]})

问题2：POST请求的参数传递错误（如果你想用POST的话） #

如果选择POST请求，你之前的代码有两个关键问题：

1. 没有设置正确的Content-Type请求头，Django无法识别你发送的是JSON数据；
2. Django默认不会把JSON数据解析到request.POST中，需要从request.body读取并手动解析。

修复后的POST版本JS代码 #

addListenerMulti(query, "propertychange change click keyup input paste", function () {
    if (query.value != oldVal) {
        oldVal = query.value;
        const data = {
            "query_so_far": query.value,
            "search_context": document.getElementById("filter").value
        };
        try {
            const xhr = new XMLHttpRequest();
            xhr.open("POST", 'url-for-view-function');
            // 必须设置请求头，告诉服务器这是JSON格式的数据
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.onload = function () {
                if (xhr.status === 200) {
                    console.log(xhr.response);
                } else if (xhr.status === 500) {
                    console.log(xhr.response);
                }
            }
            // 把JS对象转为JSON字符串发送
            xhr.send(JSON.stringify(data));
        } catch (e) {
            console.log(e);
        }
    }
})

对应的Django视图处理 #

需要从request.body读取并解析JSON数据：

import json
from django.http import JsonResponse

def autocomplete_view(request):
    if request.method == 'POST':
        # 读取请求体并解析为JSON对象
        data = json.loads(request.body)
        query_so_far = data.get('query_so_far', '')
        search_context = data.get('search_context', '')
        # 执行过滤逻辑...
        return JsonResponse({"results": ["建议1", "建议2"]})

额外小提示 #

• 不用手动调用encodeURI处理参数：URLSearchParams（GET）和JSON.stringify（POST）已经帮你做了正确的URL编码，手动编码可能会导致重复编码的问题；
• 排查小技巧：打开浏览器开发者工具的「Network」标签，查看请求的「Request URL」（GET）或「Request Payload」（POST），确认参数是否正确发送；
• 建议用Django的URL反向解析（比如{% url 'your-view-name' %}）生成请求URL，避免硬编码出错。

内容的提问来源于stack exchange，提问作者user9583443