jinja语法参考：
https://www.jianshu.com/p/9a4e24be0370
https://blog.csdn.net/dangfulin/article/details/108953882
有一个接口，用于响应添加新书的请求，响应界面是add.html，在打开add.html时，携带2项数据，分别用于标签和js。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
@app.route('/page_add_book') def page_add(): writers = book_server.writerList() r = [] for w in writers: t = {} t['id'] = w.id t['name'] = w.name r.append(t) writer_json = json.dumps(r) args = { # 向页面传递的参数 "writers": writers, # <class '[db.Model, ...]'> "writer_json": writer_json,# <class 'str'> } return render_template('add.html', **args) |
然后是页面的处理，在标签里可以直接用Jinja语法像写python代码一样直接操作。但js中须要进行一次转换。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
作者：<div style="position:relative; display:inline-block;"> <select name="writer" style="width:120px;;height:23px;" onchange="document.getElementById('writer_id').value=this.value; document.getElementById('writer_name_new').value=this.options[this.selectedIndex].text;"> <!-- Jinja语法，循环遍历writers，创建n个option --> {% for w in writers %} <!-- 这里的嵌套大括号经Jinja直接解析为可用数据 --> <option value="{{w.id}}">{{w.name}}</option> {% endfor %} </select> <input id="writer_name_new" name="writer_name_new" style="position:absolute;width:99px;height:16px;left:2px;top:3px;border:none;"> </div> <script> // 这里的嵌套大括号在html源码中会报错，但经flask后台Jinja库解析到前端时转为可用字符串数据 // 在js中接收的都默认为字符串 // tojson防止字符转义 let wsss = {{ writer_json|tojson }}; let ws = JSON.parse(wsss); if (ws.length > 0) { document.getElementById("writer_id").value = ws[0].id; document.getElementById("writer_name_new").value = ws[0].name; } else { console.info("没有作家信息") } </script> |
- end
声明
本文由崔维友 威格灵 cuiweiyou vigiles cuiweiyou 原创，转载请注明出处：http://www.gaohaiyan.com/3948.html
承接App定制、企业web站点、办公系统软件 设计开发，外包项目，毕设
