时间戳

首页 > 解决方案 > 处理发布请求参数后，如何确保 django 在新选项卡中提供模板？

javascript - 处理发布请求参数后，如何确保 django 在新选项卡中提供模板？

问题描述

我的 html 中有一个按钮，单击该按钮时会进行一些计算并post使用一些参数调用我的 API 之一，然后从中django获取参数并将它们放在模板的特定占位符中并呈现模板。

问题是我可以看到正在呈现的模板（如果我检查 'network' 部分Google inspect element），但我在页面中看不到任何内容。我希望模板在新选项卡中呈现，其中我从post放置在模板中相应占位符中的参数中获取的值。

这是我发送的内容ajax post（我angular js在我的项目中使用，但我也可以使用纯 js 来完成）

var toSend = {
            "user": username,
            "password": password,
            "text": text
            "context": $scope.newContext,
    }


$http({
          method: 'POST',
          url: '/correction',
          data: toSend
        }).
        then(function(response) {
          console.log(response.data);
  })

这是我为接收请求django的 API 定义的函数post

@csrf_exempt
def get_correction(request):
        if request.method == 'POST':
                context = {}
                try:
                        print("recieved request")
                        user_request = json.loads(request.body.decode('utf-8'))
                        '''
                        some logic I use to check given the 
                        username and password, whether it is a 
                        valid user or not
                        '''
                        text_header = user_request.get("text")
                        userid = user_request.get("user")

                        context["userid"] = userid
                        context["text_header"] = text_header

                except Exception as e:
                        print(e)

                return render(request, 'correction_page.html', context)

在这里，我将文本和用户存储在context字典中，以便与correction_page.html.

这是我的更正页面的样子

<!DOCTYPE html>
{% load static %}
<html>
<head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">


</head>
<body>
        <h1>Welcome!</h1>
        <span> {{text_header}} </span>

<script type="text/javascript" src="{% static 'js/fetch_info.js' %}"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->
</body>
</html>

这里的text_header占位符确实得到了值（正如我Google chrome在检查元素的网络部分中看到的那样。）

但是在 UI 中，我看不到任何事情发生。我希望该模板将在新选项卡中提供，但没有任何反应。

我究竟做错了什么？

标签： javascriptangularjsdjango

解决方案

这是我的建议：

Django 是服务器端，在新选项卡中打开是客户端。因此，您将无法仅通过服务器响应在新选项卡中打开。您需要在客户端处理它，即 angularJS

拨打$http电话，一旦解决，打开一个新选项卡并重定向到/correction/data应该提供所有这些数据并返回一个包含必要数据的新选项卡，这些数据在执行后template已保存POST/correction

就像是：

$http({
      method: 'POST',
      url: '/correction',
      data: toSend
    }).
    then(function(response) {
       $window.open(url , '_blank');
})

这url将是指/correction/data，你会得到你的数据

推荐阅读