Django向Javascript传递数据导致JS内部函数失效问题求助

错误根因 #

Django模板引擎仅会解析渲染模板目录下的HTML文件内容，你写在独立静态JS文件中的{{ 变量 }}模板语法不会被Django处理，浏览器加载到的JS代码是原样的{{user_name|safe}}，不符合JS语法规则，因此抛出SyntaxError: Unexpected token '{'错误。

可用解决方案 #

方案1：HTML模板内预定义全局变量 #

在HTML模板中引入你的script.js之前，先在<script>标签内定义需要的变量，Django会在渲染HTML时自动替换变量值：

<!-- 写在index.html中，位置在引入script.js之前 -->
<script>
window.currentUserName = {{ user_name|safe }};
</script>
<script src="你的script.js文件路径"></script>

之后在script.js中直接调用即可：

let user_name = window.currentUserName;

方案2：通过HTML元素data属性传递 #

如果不想使用全局变量，可以将值存入HTML元素的自定义data属性中，JS直接读取属性值：

<!-- 写在index.html中，比如给body标签加属性 -->
<body data-user-name="{{ user_name }}">
<!-- 页面其他内容 -->
</body>

在script.js中读取属性：

// 直接读取字符串
let user_name = document.body.dataset.userName;
// 若需要转成原始格式可以加JSON.parse
// let user_name = JSON.parse(document.body.dataset.userName);

视图代码优化建议 #

你的视图代码可以简化，无需额外查询数据库：request.user本身就是当前登录用户的User对象，直接调用属性即可，同时建议加未登录用户的兼容处理：

def index(request):
    if request.user.is_authenticated:
        user_name = f"{request.user.first_name} {request.user.last_name}"
    else:
        user_name = "访客"
    json_data = json.dumps(user_name)
    return render(request, 'index.html', {"user_name": json_data})

内容的提问来源于stack exchange，提问作者finethen