引言:想使用python的flask框架搭建一个日料网站,主要包含web架构,静态页面,后台系统,交互,今天教大家实现ajax操作,返回json。
本节知识:jquery,json,ajax
python环境:python2.7,flask,以及flask相关的库(没有列完,如果运行manage.py时提示未安装的库安装就ok了。)
----example.html ajax访问后端 我用的jquery,所以使用时需引入jquery
function show_user_msg(id){ //alert(id); $.getJSON('/admin/get_user',{id:id}, function(msg){ //获取用户信息 msg = JSON.parse(msg[0]); console.log(msg); $('.edit_user input[name="id"]').val(msg.id) $('.edit_user input[name="username"]').val(msg.username); $('.edit_user input[name="password"]').val(msg.password); $('.edit_user input[name="repassword"]').val(msg.password); $('.edit_user input[name="email"]').val(msg.email); $('.edit_user input[name="phone"]').val(msg.phone); //$(".edit_user select[name='power']").find("option:contains("+msg.power+")").attr("selected",true); $(".edit_user select[name='power']").find("option[value="+msg.power+"]").attr("selected",true); }); }
定义了一个函数,调用这个函数就会ajax访问/admin/get_user ,传入变量id, msg代表后端返回的信息。
如果对jquery不太了解可以去百度下这个$.getJSON这个函数,先不管这个,先去看试图定义的/admin/get_user
------views.py
###获取编辑用户的数据 @main.route('/admin/get_user', methods=['GET']) def Get_user(): if request.method =='GET' and request.args: ##获取get参数 id = int(request.args.to_dict().get('id')) ##开始查询数据信息 data = Admin.get_user_info(Admin(),id)
data正是orm获取的数据(<Admin 1>),但是不能直接把数据传到html里面,会报错。
于是我打算将这种类型的数据转换成json数据,我们要用到的库是marshmallow,直接pip安装即可。
先新建一个配置文件serializers.py 和models.py在同一目录。
-----serializers.py
# -*- coding: utf-8 -*- from marshmallow import Schema, fields ###admin表 class AdminSchema(Schema): id = fields.Int() username = fields.Str() email = fields.Email() password = fields.Str() power = fields.Int() phone = fields.Str()
然后在views.py里面修改下。
##引入文件 from ..serializers import AdminSchema ###获取编辑用户的数据 @main.route('/admin/get_user', methods=['GET']) def Get_user(): if request.method =='GET' and request.args: ##获取get参数 id = int(request.args.to_dict().get('id')) ##开始查询数据信息 data = Admin.get_user_info(Admin(),id) schema = AdminSchema() result = schema.dumps(data) return jsonify(result)
这样返回的类似json字符串东西,然后在js里面讲json字符串转换称json数组。
返回的数据由msg接住,对msg进行处理。
msg = JSON.parse(msg[0]);
然后就可以使用msg了。
今ならできます。