flask-日料网站搭建-ajax传值+返回json字符串
引言:想使用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字符串的更多相关文章
- ajax请求返回json字符串/json对象 处理
1. 返回json字符串如何处理 $.ajax({ url:xxx, success:function(date){ }, error:function(){ } }); 通过最原始的返回: Prin ...
- ajax请求返回Json字符串运用highcharts数据图表展现数据
[1].[图片] Json字符串和highcharts数据图表展现.jpg 跳至 [1] code=26754#44745" rel="nofollow"> [2] ...
- flask-日料网站搭建
引言:想使用python的flask框架搭建一个日料网站,主要包含web架构,静态页面,后台系统,交互. 本节知识:搭建web目录,目前正在copy网站. python环境:python2.7,fla ...
- flask-日料网站搭建-数据库操作
引言:想使用python的flask框架搭建一个日料网站,主要包含web架构,静态页面,后台系统,交互,目前已经copy完主页,不是前端太慢太慢. 本节知识:数据库的操作,模型建表,更新数据库. py ...
- flask-日料网站搭建-后台登录
引言:想使用python的flask框架搭建一个日料网站,主要包含web架构,静态页面,后台系统,交互,今天教大家实现后台登录功能,比较简单. 本节知识:表单标签,表单验证,数据查询,模板 pytho ...
- spring mvc 避免IE执行AJAX时,返回JSON出现下载文件
<!-- 避免IE执行AJAX时,返回JSON出现下载文件 --> <bean id="mappingJacksonHttpMessageConverter" c ...
- SpringMVC 避免IE执行AJAX时,返回JSON出现下载文件
<?xml version="1.0" encoding="UTF-8"?> <!-- SpringMVC配置文件 --> <be ...
- Ajax调用返回json,xml数据类型(0517--pm)
一.返回Json型数据: 1.主页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- dbda封装类(包括:返回二维数组、Ajax调用返回字符串、Ajax调用返回JSON)
<?php class DBDA { public $host = "localhost"; public $uid = "root"; public $ ...
随机推荐
- Java面向对象 第1节 类和对象
一.Java 对象和类 面向对象语言三大特性:封装.继承.多态: 对象:描述客观事物的一个实体: 类:类是封装对象的属性和方法的载体,反过来说具有相同属性和行为的一类实体被称为类:类行为:方法:属性: ...
- windows删除文件或目录CMD命令
rd/s/q 盘符:\某个文件夹 (强制删除文件文件夹和文件夹内所有文件)del/f/s/q 盘符:\文件名 (强制删除文件,文件名必须加文件后缀名)
- Flume 拦截器(interceptor)详解
flume 拦截器(interceptor)1.flume拦截器介绍拦截器是简单的插件式组件,设置在source和channel之间.source接收到的事件event,在写入channel之前,拦截 ...
- RedHat6.5安装kafka单机
版本号: Redhat6.5 JDK1.8 zookeeper-3.4.6 kafka_2.11-0.8.2.1 1.软件环境 已经搭建好的zookeeper: RedHat6.5 ...
- IIC总线初识
IIC总线初识 IIC总线的拓扑结构 八位数据分布: 写操作: 读操作: IIC总线的工作频率: IIC总线的时序(重要): 起始位的时序: 用verilog代码描述这一过程: 此处是用来描述SDA信 ...
- dom实例,模态框,全选,反选,取消
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- delphi中Time消息的使用方法
unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...
- XE5 Android 开发数据访问手机端 解决乱码的办法 [转]
经过测试,将sqlserver里的字段由varchar 或者char 改为 nvarchar 或者nchar 然后在手机端的clientdataset 增加字段的时候数据类型选择widestrin ...
- ubuntu 脚本执行
1.source命令用法: source FileName 作用:在当前bash环境下读取并执行FileName中的命令.该filename文件可以无"执行权限" 注:该命令通常用 ...
- angular的组件通信
参见这里 总结如下: @Input和@Ouptut 获取父实例,获取子实例 通过service共享数据 发送事件EventEmitter(个人喜欢angular-event-service) rx ...