在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中的代码块，因为它首先应该是一个空表。希望这可以提供见解。