XMLHttpRequest.send(data) не доставляет данные в функцию просмотра Django

Используя чистый Javascript, моя цель — воссоздать функцию jQuery .autocomplete() для отображения списка предложений по мере того, как пользователь вводит данные в строку поиска.

Я написал код, который прослушивает события keyup/change/paste/input для элемента ввода, т.е. панели поиска. По мере ввода пользователем я хочу использовать запрос XMLHttpRequest GET (или POST), который до сих пор будет доставлять пользовательский ввод (и информацию о контексте поиска - не имеет значения) функции просмотра, которая, в свою очередь, будет фильтровать модель для объектов содержащий пользовательский ввод, и вернуть эти объекты в списке JSONResponse в XMLHttpRequest, чтобы я мог отображать предложения на веб-странице.

Я пытался использовать запросы GET и POST, но данные, которые я хотел отправить в функцию просмотра с помощью XMLHttpRequest.send(data), казалось, никогда не доставлялись в функцию просмотра, что мешало моему прогрессу. Во всех попытках печать request.POST (или request.GET) давала пустой QueryDict: ‹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);
                }
            }
        })

Что я делаю неправильно и как я могу это исправить? Спасибо.


person TheMightyKam    schedule 19.08.2020    source источник


Ответы (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);
                }
person TheMightyKam    schedule 20.08.2020