問題描述 :

　　項目中若存在對一段js代碼復用多次的時候, 通常將此段代碼移動到一個單獨的靜態文件中在被使用的地方利用 script 標簽的 src 屬性進行外部調用

　　但是如果此文件中存在使用 HTML模板語言中的 {{ }}方式傳遞相關屬性值, 會導致無法正確獲取.

問題現象:　　

　　HTML頁面拿到的值為字符串形式 :

問題解決:

　　靜態js 文件:

 1 $("#div_digg .action").click(function () {
 2     // 點贊或踩滅
 3     var is_up = $(this).hasClass("diggit");

 4     //
 
 靜態文件中的時候,模板語言的地方是無法傳遞過來值得,根本就沒有 render
 5     // var article_id = "{{ article.pk }}";
 6     var 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 
20             if (data.state) {// 贊或者滅成功
21 
22                 if (is_up) {
23                     var val = $("#digg_count").text();
 
24                     val = parseInt(val) + 1;
25                     $("#digg_count").text(val);
26                 } else {
27                     var val = $("#bury_count").text();
28                     val = parseInt(val) + 1;
29                     $("#bury_count").text(val);
30                 }
31             }
32             else {    // 重復提交
33 
34                 if (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>{{ article.articledetail.content|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" style="color: red;"></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文件中的所有的{{ }}{% %}的部分進行相應的渲染替換成所傳的值

Django_博客項目 引入外部js文件內含模板語法無法正確獲取值得說明和處理