Как получить функцию обратного вызова AJAX для отображения шаблона Django url или html с параметрами?

Question

Я новичок и работаю над приложением, в котором я хочу перенаправить пользователя в корзину покупок (Django url через POST? Или создать html шаблон с переменными?) После проверки, сохранено ли что-либо в localStorage. Поэтому я проверяю это и использую AJAX для отправки этих данных на мой Django url, чтобы этот шаблон передавал переменные в localStorage как JSON.

Но return render(request, "pizza/prebasket.html", context) в views.py не работает: даже если данные получены, prebasket.html не отображается. Я читал, что это потому, что AJAX не позволяет этого, и вместо этого мне нужно отправить через функцию обратного вызова AJAX. Но как мне сделать это через POST и как передать параметры моему представлению или непосредственно моему шаблону html? (window.location.href обрабатывает только GET запросов, поэтому я думаю, что это не работает).

Вот мои JavaScript и мои views.py:

function previous_selection () {
  if (localStorage.getItem("preselection") != null) {

    const data = new FormData();
    data.append("preselection", preselection);
    const request = new XMLHttpRequest();
    request.open('POST', '/prebasket');
    const csrftoken = getCookie('csrftoken');
    request.setRequestHeader("X-CSRFToken", csrftoken);
    console.log("DATA IS: ", data);
    request.send(data);
    console.log("PRESELECTION IS: ", preselection);

    request.onload = () => {

      // HOW DO I CALL MY URL WITH PARAMETERS HERE?

    };
    return false;
  }
}

previous_selection();

In views.py:

@login_required
def prebasket(request):
  q_preseletion = request.POST.dict()
  preselection = json.loads(q_preselection["preselection"])

  items = []
  # logic iterates thru items to provide 'context'

  context = {"items": items}

  if request.is_ajax():
    html = render_to_string('pizza/prebasket.html', {'items': items})
    return HttpResponse(html)
  return render(request, "pizza/prebasket.html", context)

Answer 1

Если вы хотите взять содержимое страницы, возвращенной вашим AJAX вызовом, на prebasket, вы можете создать поддельный HTML документ и поместить в него возвращенный HMTL, затем взять нужный элемент и поместить это в контейнер на текущей странице.

Я не уверен, насколько широко поддерживается onload, поэтому на всякий случай это обратный вызов onreadystatechange:

request.onreadystatechange = () => {

  if(request.readyState === XMLHttpRequest.DONE){
    let status = request.status;
    if (status === 0 || (status >= 200 && status < 400)) {
      const basket = document.getElementById('basketContainer');
      let parser = new DOMParser();
      const fakePage = parser.parseFromString(request.responseText, "text/html")
      const frm = fakePage.getElementById('basket');
      basket.appendChild(frm);
    }
  }

};

Предполагается, что ваша страница, с которой вы звоните AJAX, имеет пробел или корзину, например

<div id="basketcontainer">
</div>

Затем вам нужно добавить CSS, относящийся к корзине, в ту же стр. Возможно, вы захотите условно display:none контейнер корзины, если он не соответствует форме вашей страницы.