概述

在实际开发过程中Django可以通过模版渲染的方式，直接向前端返回HTML页面，但是有一些需求可能需要结合JavaScripts进行渲染，要实现以上的目的，可以采用以下两种方式：

一种方法是，在JavaScript中用AJAX向服务器端请求获取参数。服务器提供的HTML页面中，通过JavaScript中提供AJAX逻辑，在前端将服务器提供的HTML页面加载完成后，从前端通过 AJAX 方式向Django服务器提供的API接口发起请求，得到新的list或dict等JSON字符串数据（注意，这里需要在对服务器提供的HTML页面渲染后，再向服务器发送一次请求）并显示在网页上，这种做法特别适合于不刷新整个页面动态加载一些内容。这种做法是前端主动发起AJAX请求，Django则需要提供对应的接口返回JSON字符串格式的响应数据，本文不讨论这种方法。
另一种方法是，不用AJAX，直接由服务器端向JavaScript传递参数。服务器提供HTML页面时，在Django的视图函数中，直接将list或dict等数据转换为JSON字符串,传递给模板中的JavaScript，由JavaScript显示在页面上。（注意，这里不需要从前端再次由JavaScript发起AJAX请求，因为数据已经在服务器提供HTML页面时，直接传递给JavaScript进行渲染了。）这种方法是本文要讨论的，Django传递参数到模板中的JavaScript。

Django传递参数给前端

Django 视图中使用render指定前端模版文件时，也可以添加参数，如下：

import json 


def index(request):
    data = json.dumps({
        'json_data_test': '测试Django使用render时候传递json数据给前端' 
    })
    return render(request, "index.html", {"data": data})

需要使用json.dumps 将dict 格式化成json格式

前端中分别演示了在html和js中引用django传递的参数

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
</head>
<body>
<p>Django传递的内容：{{ data }}</p>
</body>
<script>
const  json_data = JSON.parse('{{ data |escapejs}}')
alert('JavaScripts接受Django传递的参数: ' + json_data.json_data_test)
</script>
</html>

前端代码，js部分将接收到的data数据如果需要js处理此数据需要通过escapejs或者safe进行转义

1	'{{ data \|escapejs}}'

这里必须使用单引号，双引号会报错！然后用JSON.parse()得到JavaScript json对象，后面就可以在JavaScript中根据需要进一步处理和使用数据了。

Django 给前端传递参数的两种方式

概述

Django传递参数给前端