在js里面使用jinjia2的变量（后台传到前台的变量）

最新推荐文章于 2025-06-09 07:54:45 发布

wr166

最新推荐文章于 2025-06-09 07:54:45 发布

阅读量1w

点赞数

CC 4.0 BY-SA版权

分类专栏： jinjia 文章标签： jinijia javascript

本文链接：https://blog.youkuaiyun.com/wr166/article/details/78728892

jinjia 专栏收录该内容

2 篇文章

订阅专栏

在Linux系统和Python环境下，使用Jinjia2模板引擎生成HTML页面时，由于数据量大，不适合在循环内进行复杂处理。因此，选择在JavaScript中声明一个数组，用于在Jinjia2的for循环内部保存处理过的数据。当循环完成后，通过按钮点击事件触发JS函数，对数组内的数据进行二次处理，从而避免前端卡顿。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

系统：linux
编程语言：python
问题产生的原因：html前端的页面是靠后台传出的数据的多少和值进行显示的（用{% for xxx in result%}循环产生）但是因为数据量巨大不能再产生的时候处理想要的数据（因为会很卡），所以把处理的js写在for循环的外面
但是问题就来了，后台产生的循环数据，在for外面可是不能访问的，但是for循环里面有会稍微处理一下数据所以，在最上面js里面声明一个该页面的数组grouparray=[] 用于在循环的时候把数据保存起来
最后再通过按钮点击事件，调取数组的值，进行二次处理

{% extends "base.html" %}
{% block title %}数据中心{% endblock %}
{% block css %}
{% include "prodata/css.html" %}
{% endblock %}

{% block content %}
<!-- Row -->
<script src="static/vendors/bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
    grouparray=[]
</script>

    <thead>
    <button id="btndown">导出没有图片的sku</button>
    <script type="text/javascript">
        $(function(){
            $('#btndown').click(function(){
                for (var i = 0; i < grouparray.length; i++) {
                    var url="/static/images/"+grouparray[i]
                    $.ajax(url, {
                         type: 'get', 
                         async:false,//取消ajax的异步实现
                         timeout: 1000,
                         success: function() {
                         },
                         error: function() {
                            var jsonString = JSON.stringify(grouparray);
                            $.ajax({
                                url:"/nopicturename",
                                data:{"name":jsonString},
                                async:true,//取消ajax的异步实现
                                timeout: 1000,
                                success:function(){     
                                },
                                error:function(){
                                      alert("导出数据失败")
                                }
                            })
                         }
                    });
                }     
            })
        })
    </script>
    </thead>
    <tbody>
    <!-- 这里就是当页面加载的同时复制数据到数组 -->
    {% for sale in sales %}
    <script type="text/javascript">
            grouparray.push('{{sale}}');
    </script>
    <tr>
        <td><!-- 显示加载图片区 -->                                            
              <img id ="{{sale}}" data_src="/static/images/{{ sale }}.jpg" alt="没有图片" width="80">
             <script type="text/javascript">
                $(function(){
                    $('#{{ sale }}').hover(function(){
                        $(this).attr("src",$(this).attr('data_src'))
                    });

                }) 
            </script>   
        </td>
        {% endfor %}
    </tr>
{% endfor %}

<!-- /Row -->

{% endblock %   }

{% block js %}
{% include "prodata/js.html" %}
{% endblock %}