动态创建 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 模板添加到其中（就像您所做的那样），然后将请求发送到 views 中的 view function > 文件并生成该函数 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);
    }
});

如果你还有疑惑，请留言，我会回复的。