博客模板大全Django_博客项⽬引⼊外部js⽂件内含模板语法⽆法正确获取值得说明和处理问题描述 :
  项⽬中若存在对⼀段js代码复⽤多次的时候, 通常将此段代码移动到⼀个单独的静态⽂件中在被使⽤的地⽅利⽤ script 标签的 src 属性进⾏外部调⽤
  但是如果此⽂件中存在使⽤ HTML模板语⾔中的 {{ }}⽅式传递相关属性值, 会导致⽆法正确获取.
问题现象: 
  HTML页⾯拿到的值为字符串形式 :
问题解决:
  静态js ⽂件:
1 $("#div_digg .action").click(function () {
2// 点赞或踩灭
3var is_up = $(this).hasClass("diggit");
4// 静态⽂件中的时候，模板语⾔的地⽅是⽆法传递过来值得，根本就没有 render
5// var article_id = "{{ article.pk }}";
6var article_id = $(".info").attr("article_id");
7
8    $.ajax({
9        url: "/blog/up_down/",
10        type: "post",
11        data: {
12            is_up: is_up,
13            article_id: article_id,
14            csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
15        },
16        success: function (data) {
17            console.log(data);
18
19
20if (data.state) {// 赞或者灭成功
21
22if (is_up) {
23var val = $("#digg_count").text();
24                    val = parseInt(val) + 1;
25                    $("#digg_count").text(val);
26                } else {
27var val = $("#bury_count").text();
28                    val = parseInt(val) + 1;
29                    $("#bury_count").text(val);
30                }
31            }
32else {    // 重复提交
33
34if (data.fisrt_action) {
35                    $("#digg_tips").html("您已经推荐过");
36                } else {
37                    $("#digg_tips").html("您已经反对过");
38                }
39
40                setTimeout(function () {
41                    $("#digg_tips").html("")
42                }, 1000)
43
44            }
45
46        }
47    })
48
49
50 })
  HTML⽂件:
1 {% extends 'base.html' %}
2
3 {% block page-main %}
4
5<div class="article-detail">
6<h1>{{ article.title }}</h1>
7<p>{{ t|safe }}</p>
8</div>
9
10<div id="div_digg">
11<div class="diggit action">
12<span class="diggnum" id="digg_count">{{ article.up_count }}</span>
13</div>
14<div class="buryit action">
15<span class="burynum" id="bury_count">{{ article.down_count }}</span>
16</div>
17<div class="clear"></div>
18<div class="diggword" id="digg_tips" ></div>
19</div>
20<!--通过标签的⾃定义属性来传递，让浏览器通过解析html代码拿到想要的值-->
21<div class="info" article_id="{{ article.pk }}"></div>
22    {% csrf_token %}
23<!--这样外部引⼊会导致内部的模板语⾔的⽤法的地⽅⽆法拿到值，可以通过标签来传递-->
24<script src="/static/js/article_detail.js"></script>
25
26 {% endblock %}
问题解决原理:
  在js代码中可以使⽤ {{ }} 的模板语⾔进⾏当前页⾯的相关值操作
    但是必须要在外⾯加双引号 "{{ }}" 因为这个值的出来之后是 : ⽺驼⽽不是"⽺驼"
    不带双引号会被认为是没定义的变量名⽆法操作
  在HTML代码中本来就可以使⽤ {{ }} 的模板语⾔进⾏当前页⾯的相关值操作
    但是HTML 本⾝的页⾯渲染的的值就是不带双引号的，难道你看⽹页的时候所有的显⽰都带双引号吗?
  因此在js 代码中使⽤ {{}} 是完全没有问题的，问题在于当js代码被被存在静态⽂件的时候.我们需要熟知 web请求的原理
基于 B/S 的 Django_web 请求在⼀次请求得到的回应中得益于 render 的渲染, 封装后再回应发出的已
经是完整的 html ⽹页代码,
  完整的页⾯代码中的所有的 {{ }} {% %} 相关的代码已经被 render 替换成相应的值 ，之后剩下的⼯作就是浏览器的⼯作了  浏览器需要对 html 代码进⾏解析渲染成相应的标签及其样式, 对于外部引⼊的静态⽂件⽐如 js , css , 图⽚ , 等. 浏览器需要进⼀步的发出请求.
  在对静态⽂件的的请求中, 并不会再有 render 插⼿的余地了. 即是说没有render 的参数可以拿来⽤了, 因此只能以字符串的形式体现在⽹页中ps: 
  render 渲染的到底是什么?
render渲染的是⼀个html⽂件
html⽂件中有什么东西 render ⾃⼰是不会在意的⽽且他也不认识你什么html还是js代码
只 (注意是"只"!) 会将html⽂件中的所有的{{ }}{% %}的部分进⾏相应的渲染替换成所传的值

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。