XMLHttpRequest.send(data) 没有将数据传递给 Django 视图函数

Question

使用纯 Javascript，我的目标是重新创建 jQuery 的 .autocomplete() 函数，以便在用户在搜索栏中输入内容时显示建议列表。

我编写了代码来侦听输入元素（即搜索栏）上的“keyup/change/paste/input”事件。当用户键入时，我希望使用 XMLHttpRequest GET（或 POST）请求，该请求将到目前为止的用户输入（以及有关搜索上下文的信息——不相关）传递给视图函数，该视图函数将依次过滤到目前为止包含用户输入的对象的模型和 return JSONResponse 列表中的那些对象到 XMLHttpRequest 以便我可以在网页上显示建议。

我尝试同时使用 GET 和 POST 请求，但我希望使用 XMLHttpRequest.send(data) 发送到视图函数的数据似乎从未传送到视图函数，因此阻碍了我的进步.在所有尝试中，打印 request.POST（或 request.GET）给出了一个空的 QueryDict：

下面是一些代码片段：

\ The below JS code is run on once the page is ready, i.e fully loaded
addListenerMulti(query, "propertychange change click keyup input paste", function () {
            // check if value has changed...
            if (query.value != oldVal) {
                oldVal = query.value;
                var context_object = JSON.stringify({
                    "query_so_far": encodeURI(query.value),
                    "search_context": encodeURI(document.getElementById("filter").value)
                });
              
                try {
                    var xhr = new XMLHttpRequest();
                    xhr.open("GET", 'url-for-view-function');
                    xhr.onload = function () {
                        if (xhr.status === 200) {
                            console.log(xhr.response);
                        } else if (xhr.status === 500) {
                            console.log(xhr.response);
                        }
                    }
                    xhr.send(context_object);
                } catch (e) {
                    console.log(e);
                }
            }
        })

我哪里出错了，我该如何解决？谢谢。

Answer 1

我使用 GET 请求解决了这个问题。为了发送数据，我将其包含在接受键值对的 XMLHttpRequest.setRequestHeader 函数中。需要注意的是，密钥的格式应为“Xxxx-Yyyy”或简单的“Xxxx”。

try {
                    var xhr = new XMLHttpRequest();
                    xhr.open("GET", 'autocomplete');
                    xhr.setRequestHeader("Query-Str", encodeURI(query.value));
                    xhr.setRequestHeader("Search-Context", encodeURI(document.getElementById("filter").value))
                    xhr.onload = function () {
                        if (xhr.status === 200) {
                            console.log(xhr.response);
                        } else if (xhr.status === 500) {
                            console.log(xhr.response);
                        }
                    }
                    xhr.send(context_object);
                } catch (e) {
                    console.log(e);
                }

XMLHttpRequest.send(data) 没有将数据传递给 Django 视图函数

XMLHttpRequest.send(data) not delivering data to Django view function

javascript

django

xmlhttprequest

jquery-ui-autocomplete