之前做了dict字典的合并,这一篇会将dict数据转换成json格式的数据保存在本地,并在需要的时候读取显示。
将数据保存成.json文件:
@app.route('/', methods=['GET', 'POST']) def detail(): one = {'name': 'xiaozhi', 'age': 188} mess1 = ['sss is sss', 'aaa aa aaaa'] two = {"mess1": mess1} data = dict(one, **two) jsonData = json.dumps(data) fileObject = open('data.json', 'w') fileObject.write(jsonData) fileObject.close() return jsonify({"success": 200, "data": data})
在浏览器输入URL后,json文件在本地创建,打开我们可以看到数据已经成功保存:
读取本地.json文件并解析显示:
如图,我们做一个点击事件,点击按钮读取.json文件,并将信息显示到对应的位置上
路由代码:
@app.route('/history', methods=['GET', 'POST']) def history(): data = json.loads(request.form.get('data')) number = data['number'] print(number) if number == '01': file = 'data.json' fb = open(file, 'r') dicts = json.load(fb) fb.close() myjson = json.dumps(dicts) return myjson return 'no history'
前台页面展示交互展示代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <script src="{{ url_for('static', filename='js/jquery-1.7.1.min.js') }}"></script> </head> <body> <input type="button" value="show log" onclick="show()"/> <input type="hidden" id="number" value="01"><br> 用户:<a id="user"></a><br> 年龄:<a id="age"></a><br> 信息:<a id="p0"></a><br> <a id="p1"></a> </body> <script> function show(){ var number= document.getElementById("number").value; var data= { data: JSON.stringify({ 'number': number }), } $.ajax({ url:"{{ url_for('history') }}", type:"post", data:data, dataType: 'json', success:function(data){ $(user).text(data.name); $(age).text(data.age); for(var i=0;i<data.mess1.length;i++){ $("#p"+i).text(data.mess1[i]); } }, error:function(e){ alert("error"); } }) } </script> </html>
以上就可以简单的实现保存并读取本地json文件。