时间戳

首页 > 解决方案 > 如何获取 AJAX 回调函数来呈现带有参数的 Django url 或 html 模板？

javascript - 如何获取 AJAX 回调函数来呈现带有参数的 Django url 或 html 模板？

问题描述

我是一名初学者，正在开发一个应用程序，在检查是否有任何内容保存在localStorage. 因此，我检查并使用 AJAX 将该数据发送到我的 Django url，以便将 localStorage 中的变量作为 JSON 传递的模板呈现。

但是return render(request, "pizza/prebasket.html", context)inviews.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();

在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)

标签： javascriptdjangoajax

解决方案

如果您想获取 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地使用篮子容器，以防它与您的页面形状混淆。

推荐阅读