返回和循环列表 jQuery 和 Flask答案

【问题标题】：Returning and Looping over a List jQuery and Flask返回和循环列表 jQuery 和 Flask
【发布时间】：2017-02-28 06:00:13
【问题描述】：

我希望能够遍历 jQuery 的结果。我正在使用this 教学示例：

{% extends "header.html" %}
{% block body %}
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type=text/javascript>
            $(function() {
              $('a#process_input').bind('click', function() {
                $.getJSON('/background_process', {
                  proglang: $('input[name="proglang"]').val(),
                }, function(data) {
                  $("#result").text(data.result);
                });
                return false;
              });
            });
        </script>
    </head>

    <body>
        <div class='container'>
        <h3>Welcome! Which is the best programming language of them all?</h3>
            <form>
                <input type=text size=5 name=proglang>
                <a href=# id=process_input><button class='btn btn-default'>Submit</button></a>
            </form>
        <p id=result></p>
        </div>
    </body>
{% endblock %}

我试图修改它以返回一个列表、保存它并循环它，但这似乎不起作用。这是我尝试过的相关部分：

, function(data) {
          mylist = $("#result");

          {% for myobj in mylist %}

          <p>{{myobj.textstring}}</p>

          {% endfor %}
                });
                return false;
              });
            });

如何返回和循环列表？

【问题讨论】：

失败时是否报错？您能否查看您获得的 JSON 数据以确认其格式是否正确？

标签： jquery python flask flask-sqlalchemy

【解决方案1】：

, function(data) {
          mylist = $("#result");

          {% for myobj in mylist %}

          <p>{{myobj.textstring}}</p>

          {% endfor %}
                });
                return false;
              });
            });

这是行不通的 - 您正在尝试对未在您的视图中定义但仅在 Javascript 中定义的变量使用 Jinja 模板处理 {% 和 %}。

您可以只使用 jQuery (docs) 来迭代结果集。以下内容未经测试，但应该是一个很好的起点。

, function(data) {
          mylist = $("#result");

          $(mylist).each(function () {
              document.write("<p>" + this.textstring + "</p>"); // or similar
          });

          return false;

});

【讨论】：

【解决方案2】：

我没有在 JavaScript 中循环遍历列表，而是将 Flask 中的函数设置为 jsonify 并为可以插入页面的 html div 返回一个 html jinja 模板。所以在上面的脚本中：

$("#result").text(data.result);

成为：

$("#result").html(data.result);

【讨论】：