使用AJAX的Flask - 更新HTML表

Question

使用Flask和AJAX我构建了一个像这样的HTML表......

app.py

tableDict = buildTable()
return render_template('page.html', tableDict = tableDict)

page.html中

<tbody>
{% for key, value in tableDict.iteritems() %}
<tr>
<th> {{ key }} </th>
<td> {{ value }} </td>
</tr>
{% endfor %}
</tbody>

工作正常。

我想使用AJAX更新此表。我知道如何使用类似

之类的ID标签来更新元素

ajax.js

$("#elementToUpdate").html(response.valueToUpdate);

所以我试过......

app.py

tableDict = buildTable()
return jsonify(tableDict = tableDict)

ajax.js

$("#tableDict").html(response.tableDict);

这不起作用 - 我的猜测是因为我根本没有更新ID标签......所以我不应该为此感到惊讶。

如何获取我传递给AJAX更新表的字典？

Answer 1

  

$("#elementToUpdate").html(response.valueToUpdate);

此行会将该元素的HTML更新为response.valueToUpdate。假设tableDict是HTML，您希望使用jQuery来选择要更新的元素。

我要仔细检查的第一件事是$("#tableDict")正在选择你想要的元素。您可以通过打开Chrome开发工具并在控制台中测试jQuery选择器来确认这一点。

第二件事是在AJAX调用返回后检查页面上的HTML。抛出一些console.log以确保数据返回到您期望的结构中。