flask ajax json html,在Flask模板中显示JSON数组

作为jquery / AJAX和flask的新手，我一直很难解决这个问题。

我的app.py将根据用户对PostgreSQL数据库的输入进行搜索，然后将结果返回到模板中的表中。

我之所以需要AJAX的原因是由于表单字段的数量过多，如果我忘记选择或添加更多选项以将搜索范围缩小到几个结果，我不想在其中重新输入信息。

然后，我试图做的是将所有这些信息都以JSON的形式返回，只是能够在正确的位置进行-我将其喷出到了自己的页面上，而我努力地使该信息可用于我的jinja2模板。

现在，我已经设法将这些信息反馈回jinja2模板，event.preventDefault()并且当我加载搜索页面时，现在可以在控制台中看到此信息。

我现在的问题是我可以将信息从生成的JSON数组返回到模板，这是错误的。我可以使它选择数组中的第一项，但它不会处理我的搜索查询(它是在将它们吐到浏览器中时执行的)，并且它并没有真正整齐地附加到表中，连续搜索只是

在其中添加了更多标签并且不符合我的表格布局。

我需要做的是运行查询并为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(

$('

').text(item[0].startchass),

$('

').text(item[0].cusname),

$('

').text(item[0].chassistype1),

$('

').text(item[0].axleqty),

$('

').text(item[0].tyres),

$('

').text(item[0].extlength),

$('

').text(item[0].neck),

$('

').text(item[0].stepheight),

$('

').text(item[0].reardeckheight),

$('

').text(item[0].siderave),

$('

').text(item[0].steer),

$('

').text(item[0].sockets),

$('

').text(item[0].containertwistlock),

$('

').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/