【发布时间】：2017-11-22 10:53:23
【问题描述】：
我正在使用 Flask、Bootstrap 和 jinja2 构建一个应用程序，它在我的设备（手机）上保存了一些细节。
主页是一个表格，每行代表一个设备。对于每台设备，我都有一个“报告”列，其中包含指向报告页面的链接。
目前，我有来自 home.js 的以下请求
$('.report').click(function () {
console.log("report clicked");
$.ajax({
url: '/showDeviceReports',
type: 'POST',
data:{'attack':attack},
success: function(response){
console.log(response.data);
document.write(response.data);
},
error: function(error){
console.log(error);
}
});
});
现在在我的烧瓶服务器上，我正在处理请求 routes.py
@routes.route('/showDeviceReports', methods=['POST','GET'])
def showDeviceReports():
attack = request.values.get('attack', None)
print attack
if attack:
collection = mongo.db[attack]
res = collection.find_one({"_id": "dd:dd:ff:dd:gg:44"})
if res:
res = collection.find_one({"_id": "dd:dd:ff:dd:gg:44", "reports._id": "10.0.1"})
if res:
# update array object
collection.update_one({"_id": "dd:dd:ff:dd:gg:44","reports._id":"10.0.1"},
{'$set':{"reports.0":reports_dict[attack]}})
else:
#add new element to report array
collection.update_one({"_id": "dd:dd:ff:dd:gg:44"},
{'$push':{"reports":reports_dict[attack]}})
pass
else:
# myreports = collection.find_one_and_replace({"_id": "dd:dd:ff:dd:gg:22"}, gold_apple_report, upsert=True)
schema = {"_id": "dd:dd:ff:dd:gg:44",
"name":"iphone",
"account":"test@gmail.com",
"updated_on":str(datetime.strftime(datetime.now(), '%Y-%m-%d')),
"reports": [reports_dict[attack]]}
collection.insert_one(schema)
# myreports = collection.find_one_and_replace({"_id":"dd:dd:ff:dd:gg:22"}, res,upsert=True)
# print myreports.inserted_id
res = collection.find_one({"_id": "dd:dd:ff:dd:gg:44"})
else:
res = {}
return render_template('reports.html', meta=res)
然后我想加载reports.html 页面
包括我传递给页面的meta 数据。
这是reports.html：
<div class="tree well">
<ul>
<li>
<span><i class="fa fa-tablet"></i> {{meta["name"]}}</span>
<ul>
{% for v in meta["reports"] %}
<li>
<span><i class="fa fa-code-fork"></i> {{v["_id"]}} </span>
<ul>
<li>
<span><i class="fa fa-calendar-o "></i> {{meta["updated_on"]}} </span>
</li>
<li >
<span ><i class="fa fa-sitemap"></i> Attack flow </span>
<ul >
{% for proc in v["attackProccess"].keys() %}
<li >
<span ><i class="fa fa-minus-circle"></i> {{proc}} </span>
<ul id="ul-attack-items">
<li>
<span class="status" id="{{proc}}">{{v["attackProccess"][proc]["status"]}}</span>
</li>
<li>
<span class="fa fa-bug status"> issues</span>
</li>
</ul>
</li>
{% endfor %}
</ul>
</li>
<li >
<span > <i class="fa fa-database"></i> Data </span>
<ul >
{% for item in v["data"].keys() %}
<li >
<span ><i class="fa fa-minus-circle"></i> {{item}} </span>
{% if item == 'chats' %}
<ul>
{% for chat in v["data"][item] %}
<li>
<span ><i class="fa fa-comments"></i> {{chat}} </span>
<ul id="ul-chat-items">
<li>
<span class="status" id="{{chat}}" >{{v["data"][item][chat]["status"]}}</span>
</li>
<li>
<span class="fa fa-bug status"> issues</span>
</li>
</ul>
</li>
{% endfor %}
</ul>
{% else %}
<ul id="ul-data-items">
<li>
<span class="status" id="{{item}}" >{{v["data"][item]["status"]}} </span>
</li>
<li>
<span class="fa fa-bug status"> issues</span>
</li>
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</li>
</ul>
</li>
{% endfor %}
</ul>
</li>
</ul>
</div>
但我应该通过 ajax 请求处理它的问题。
有什么方法可以将jquery 与jinja 整合在一起？
【问题讨论】：
-
使用 GET 进行初始请求，使用 POST 进行 ajax 调用。识别请求类型后运行单独的逻辑
-
但我仍然应该如何渲染模板？我在我的模板中使用 jinja。看html代码。
-
您可以正常渲染模板，如
render_template。这里的主要区别是您（通常）希望在使用 AJAX 时呈现一个 sn-p 并将其集成到您的页面中（例如使用 jQuery 或其他东西）。