动态创建 html div jinja2 和 ajax

Question

所以我有这个滚动函数，当它到达页面底部时发送一个 ajax 请求，ajax 函数以 JSON 检索一些数据，我想将此数据填充到 div 中。是否可以使用 jinja2 来做到这一点？目前我只是在玩弄并用 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的结果。

废话太多了，先写点代码吧。

示例代码

动态数据.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 %}

视图.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))

应用程序.js

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

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