javascript - 动态创建 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 模板(就像您所做的那样)，然后将请求发送到一个 View 函数 在 views 文件中并使该函数 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 %}

View .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);
    }
});

如果你还有不明白的，可以留言，我会回复。