html模板变量,Django HTML模板中的Javascript变量

我假设您建议将JS脚本及其所需数据放入模板中(通过字符串插值将数据注入JS脚本)

你可以看到它如何快速失控.下面我提供代码组织的级别,按升序排列(一般来说,你越往往越好)

1.使用脚本标记包含您的JS,而不是嵌入到HTML中

第一步:将JS放入自己的.js文件中,并通过< script>包含它.标签很简单.所以,让我们这样做.而且,现代浏览器可以并行加载文件,因此同时加载HTML和JS文件是一个优势.

2.避免使用Django模板将数据输入JS

现在我见过人们做的另一个问题是使用< script> data = {“info”:“something”}< / script>将数据传递给JS.在包括他们的JS代码之前.

由于数据在Django模板中进行字符串插值这一事实原因很多,这也不是很理想:

3.让JS通过Django(REST)API提取数据

但是,既然你说你熟悉Django,我建议你创建一个视图,以JSON格式返回客户端JS需要的数据.例如.在/ api / info上返回{“info”:“something”}的东西.

有很多方法可以实现这一点,here’s a start(尽管可能已经过时)

然后我让script.js文件通过简单的HTTP GET调用读取数据.很多JS库都可以轻松地为您完成此任务.

这种方法的一些优点

>您的代码(JS部分)独立于数据部分(JSON数据)>您可以轻松查看/测试正在输入JSON的内容,因为它只是一个HTTP GET请求>您的HTML / JS部分是完全静态的,因此可以缓存,从而提高了加载页面的性能.> Python数据转换为JSON非常简单(没有插值功夫)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Django ,可以通过在视图变量传递到模板,然后在模板使用这些变量来实现自定义变量。要实现自增,可以使用 JavaScript 来处理。 以下是一个示例: 在视图定义变量: ```python def my_view(request): count = 0 # 做一些处理,使 count 自增 context = {'count': count} return render(request, 'my_template.html', context) ``` 在模板使用变量JavaScript: ```html {% extends "base.html" %} {% block content %} <p>Count: <span id="count">{{ count }}</span></p> <button onclick="incrementCount()">Increment</button> {% endblock %} {% block scripts %} <script> function incrementCount() { var countElement = document.getElementById('count'); var count = parseInt(countElement.innerText); count++; countElement.innerText = count; } </script> {% endblock %} ``` 在上面的示例,我们在视图函数定义了一个名为 `count` 的变量,并将其传递到模板。在模板,我们使用 `{{ count }}` 来显示变量的值,并在按钮上绑定了一个 `onclick` 事件,该事件会调用 `incrementCount` 函数来自增 `count` 变量。`incrementCount` 函数使用 JavaScript 来获取当前的 `count` 值,自增并将结果更新到页面上。 注意,在上面的示例,我们将 JavaScript 代码放在了模板的 `scripts` 块,这是因为通常情况下,我们希望将 JavaScript 代码放在页面底部,以便页面加载更快。如果您需要在多个页面使用相同的 JavaScript 代码,可以将其放在一个单独的文件,并在模板使用 `script` 标签来引入。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值