处理帖子请求参数后,如何确保django在新选项卡中提供模板?

时间:2019-04-27 11:13:07

标签: javascript angularjs django

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

问题是我可以看到正在渲染的模板(如果我检查了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);
  }) 

这是我为API定义的django函数,用于接收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占位符确实获得了值(正如我在inspect元素的Google chrome网络部分中看到的那样)。

但是在用户界面中,我什么都没看到。我希望模板可以在新标签中提供,但是什么也没发生。

我在做什么错了?

1 个答案:

答案 0 :(得分:0)

这是我的建议:

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,您将获取数据