作為jquery / AJAX和flask的新手，我一直很難解決這個問題。我的app.py將根據用戶對PostgreSQL數據庫的輸入進行搜索，然后將結果返回到模板中的表中。我之所以需要AJAX的原因是由于表單字段的數量過多，如果我忘記選擇或添加更多選項以將搜索范圍縮小到幾個結果，我不想在其中重新輸入信息。然后，我試圖做的是將所有這些信息都以JSON的形式返回，只是能夠在正確的位置進行-我將其噴出到了自己的頁面上，而我努力地使該信息可用于我的jinja2模板?，F在，我已經設法將這些信息反饋回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/
1 回答
慕容森
TA貢獻1853條經驗 獲得超18個贊
我對您的做法很困惑。
但是，我看到您正在使用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中的代碼塊，因為它首先應該是一個空表。
希望這可以提供見解。
添加回答
舉報
0/150
提交
取消