flask-日料网站搭建-ajax传值+返回json字符串

时间:2022-02-03 08:35:50

引言:想使用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了。