Question

所以我有这个滚动函数，当它到达页面底部时发送ajax请求，ajax函数检索JSON中的一些数据，我想将这些数据填充到div中。是否可以使用jinja2来做到这一点？目前我正在玩js并且用js创建一个div（不是我想要的那个）。

<script type="text/javascript">
    $(document).ready(function() {
        var start = $(".boxybox").length;
        var stop = start + 3;

        var create_div = function() {
            if ($(window).scrollTop() === $(document).height() - $(window).height()) {
              $.get('/more', {
                  start: start,
                  stop: stop
                  }, function(feed) {
                    var feed = JSON.parse(feed);
                    console.log(feed[0].limit);
                    var div = $("<div></div>").addClass("boxybox").attr("id", feed[0].limit);
                    $('.feed').append(div);
                  });
            }
        }
        var throttled = _.throttle(create_div, 500);
        $(window).scroll(throttled);
    });
</script>

这可以完成这项工作，但如果我能用jinja2和纯HTML动态创建这个div，我会感兴趣吗？

我想到了3个选项，首先是我展示的，第二个是创建HTML服务器端并以JSON返回，第三个将以某种方式使用jinja2并填充div？

Answer 1

好的，这有点复杂，但我希望我理解正确。

是的，您可以使用Jinja2创建ajax的动态内容。

只需创建一个新的HTML文件并添加jinja模板（就像你做的那样），然后将请求发送到中的查看功能视图文件并使该函数return render_template('path/to/dynamic_data.html', new_fetched_data=new_fetched_data)然后通过jQuery附加结果。

太多的谈话，让我们写一些代码。

示例代码

dynamic_data.html

{% block body %}
    <div class="new_dynamic_data">
        {% if new_fetched_data %}
             <p> {{ new_fetched_data }} </p>
             # Do whatever with the data
        {% endif %}
    </div>
{% endblock %}

views.py

@app.route('/more/', methods=['POST'])
def _more():
    new_fetched_data = fetch_data() # Data fetch function through sqlalchemy
    return jsonify('fetched_data', render_template('dynamic_data.html', new_fetched_data=new_fetched_data))

的application.js

#Function to handle scrolling
$.ajax({
    url: "/more/",
    type: "POST",
    dataType: "json",
    success: function(data){
         $(html).append(data);
    }
});

如果您仍然感到困惑，请发表评论我会回复。

动态创建html div jinja2和ajax

1 个答案:

示例代码

dynamic_data.html

views.py

的application.js