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

  

flask-日料网站搭建-ajax传值+返回json字符串的更多相关文章

  1. ajax请求返回json字符串/json对象 处理

    1. 返回json字符串如何处理 $.ajax({ url:xxx, success:function(date){ }, error:function(){ } }); 通过最原始的返回: Prin ...

  2. ajax请求返回Json字符串运用highcharts数据图表展现数据

    [1].[图片] Json字符串和highcharts数据图表展现.jpg 跳至 [1] code=26754#44745" rel="nofollow"> [2] ...

  3. flask-日料网站搭建

    引言:想使用python的flask框架搭建一个日料网站,主要包含web架构,静态页面,后台系统,交互. 本节知识:搭建web目录,目前正在copy网站. python环境:python2.7,fla ...

  4. flask-日料网站搭建-数据库操作

    引言:想使用python的flask框架搭建一个日料网站,主要包含web架构,静态页面,后台系统,交互,目前已经copy完主页,不是前端太慢太慢. 本节知识:数据库的操作,模型建表,更新数据库. py ...

  5. flask-日料网站搭建-后台登录

    引言:想使用python的flask框架搭建一个日料网站,主要包含web架构,静态页面,后台系统,交互,今天教大家实现后台登录功能,比较简单. 本节知识:表单标签,表单验证,数据查询,模板 pytho ...

  6. spring mvc 避免IE执行AJAX时,返回JSON出现下载文件

    <!-- 避免IE执行AJAX时,返回JSON出现下载文件 --> <bean id="mappingJacksonHttpMessageConverter" c ...

  7. SpringMVC 避免IE执行AJAX时,返回JSON出现下载文件

    <?xml version="1.0" encoding="UTF-8"?> <!-- SpringMVC配置文件 --> <be ...

  8. Ajax调用返回json,xml数据类型(0517--pm)

    一.返回Json型数据: 1.主页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  9. dbda封装类(包括:返回二维数组、Ajax调用返回字符串、Ajax调用返回JSON)

    <?php class DBDA { public $host = "localhost"; public $uid = "root"; public $ ...

随机推荐

  1. TP5模型belongsTo和hasOne的区别

    在使用tp5模型的ORM的时候出现belongsTo和hasOne都有表示一对一的关系,但是二者并不相同.以下举例说明两者的区别: 首先有user表 字段 id name password字段 然后有 ...

  2. 五、springboot(二)配置数据源oracle

    1.添加依赖 <!-- jpa --> <dependency> <groupId>org.springframework.boot</groupId> ...

  3. Eclipse设置自动提示(转)

    一.Eclipse编辑Spring配置文件xml时自动提示类class包名 链接:http://blog.csdn.net/hh775313602/article/details/70176531 第 ...

  4. php面向对象编程 父类调用子类编程

    使用父类调用子类的实现代码

  5. 代码编辑器之notepad++

    引用及下载地址:http://www.iplaysoft.com/notepad-plus.html NotePad++ 优秀的支持语法高亮的开源免费编辑器绿色版下载 EditPlus,它始终是一款收 ...

  6. 找进程的窗口Handle

    Process[] ProcessList = Process.GetProcessesByName("mspaint");//画图板 IntPtr test = ProcessL ...

  7. java中的自定义注解的使用

    https://www.cnblogs.com/acm-bingzi/p/javaAnnotation.html

  8. C++进阶--解谜operator new/delete

    //############################################################################ // 解谜operator new/del ...

  9. 微信小程序客服消息使用

    客服消息使用 为丰富小程序的服务能力,提高服务质量,微信为小程序提供客服消息能力,以便小程序用户可以方便快捷地与小程序服务提供方进行沟通. xiaokefu.com.cn 功能介绍 用户可使用小程序客 ...

  10. react基础

    上一篇文章主要是记录了自己是如何创建react项目的,今天则主要是总结一下react中的一个基础入门知识,包括数据定义和绑定.属性绑定.数组循环等等. 组件继承和挂载 当我们使用脚手架或者命令行创建一 ...