在Flask模板中显示JSON数组

Question

作为jquery / AJAX和flask的新手，我一直很难解决这个问题。我的app.py将根据用户对PostgreSQL数据库的输入进行搜索，然后将结果返回到模板中的表中。我之所以需要AJAX的原因是由于表单字段的数量过多，如果我忘记选择或添加更多选项以将搜索范围缩小到几个结果，我不想在其中重新输入信息。然后，我试图做的是将所有这些信息都以JSON的形式返回，只是能够在正确的位置进行-我将其喷出到了自己的页面上，而我努力地使该信息可用于我的jinja2模板。现在，我已经设法将这些信息反馈回jinja2模板，event.preventDefault()并且当我加载搜索页面时，现在可以在控制台中看到此信息。我现在的问题是我可以将信息从生成的JSON数组返回到模板，这是错误的。我可以使它选择数组中的第一项，但它不会处理我的搜索查询（它是在将它们吐到浏览器中时执行的），并且它并没有真正整齐地附加到表中，连续搜索只是<td>在其中添加了更多标签并且不符合我的表格布局。我需要做的是运行查询并为JSON提供搜索结果，然后将其正确返回到我的html模板。我已经尝试了一段时间，希望能提供任何帮助。我的ajax.js文件$(function() {    $('form').on('submit', function(e){        event.preventDefault()        $.ajax({            url: '/search',            data: $('form').serialize(),            type: 'POST',            contentType: "application/json",            dataType: "json",            success: function(response) {            $.each(response, function(i, item) {                $('#myTable').append(                    $('<td>').text(item[0].startchass),                    $('<td>').text(item[0].cusname),                    $('<td>').text(item[0].chassistype1),                    $('<td>').text(item[0].axleqty),                    $('<td>').text(item[0].tyres),                    $('<td>').text(item[0].extlength),                    $('<td>').text(item[0].neck),                    $('<td>').text(item[0].stepheight),                    $('<td>').text(item[0].reardeckheight),                    $('<td>').text(item[0].siderave),                    $('<td>').text(item[0].steer),                    $('<td>').text(item[0].sockets),                    $('<td>').text(item[0].containertwistlock),                    $('<td>').text(item[0].headboard),                )                    console.log(response[i]); // idk if this works...            });            },            error: function(error) {                console.log(error);            }        });    });});最后是我的模板html（将此粘贴到其他位置，因为它有点大）https://paste.pound-python.org/show/d6Zm37ivTOnphW7lHcaj/

Answer 1

我对您的做法很困惑。

但是，我看到您正在使用jinja模板以及AJAX填充表。您只需要一个，或者至少两个都不起作用，有两个原因。

我没有看到像这样将任何结果添加到jinja模板上的代码

return render_template('platform.html', result2=result2)

对于您粘贴的html中的此代码块，

{% for item in result2 %}

<tr>

<td>{{ item.startchass }}</td><td>{{ item.cusname }}</td><td>{{ item.chassistype1 }}<td>{{ item.axleqty }}</td><td>{{ item.tyres }}</td><td>{{ item.extlength }}</td><td>{{ item.neck }}</td><td>{{ item.stepheight }}</td><td>{{ item.reardeckheight }}</td><td>{{ item.siderave }}</td><td>{{ item.steer }}</td><td>{{ item.sockets }}</td><td>{{ item.containerstwistlock }}</td><td>{{ item.headboard }}</td>

</tr>

{% endfor %}

您只是将tds附加到MyTable的AJAX代码上。82 Tuskers是正确的。正确构造您的html。

如果要使用进阶方法，则可以在提交时向/ search请求POST请求，并返回渲染的模板，其结果如原因1所示。

如果您想使用AJAX方法，请进行/ search纯粹的POST并从后端接收json文件，并为它们添加适当的html结构。您将不再需要原因1中的代码块，因为它首先应该是一个空表。

希望这可以提供见解。