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 $ ...
随机推荐
- Docker网络解决方案-Flannel(转)
转自https://www.cnblogs.com/kevingrace/p/6859114.html Docker跨主机容器间网络通信实现的工具有Pipework.Flannel.Weave.Ope ...
- Java高级特性 第3节 java中常用的实用类(2)
§String类 一.创建字符串对象 采用字面值的方式赋值:String s = "abc"; 用new关键字:String s = new String("vfggkf ...
- oracle之 如何 dump logfile
这篇文章解释了如何在联机或归档重做日志文件中获取转储. 约束和限制:1.数据库必须安装(或打开).更改系统转储日志文件与任何实例无关,因此不需要为其操作安装数据库.但是,在ALTER SYSTEM D ...
- C# 泛型类和泛型方法
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- Python Scrapy环境配置教程+使用Scrapy爬取李毅吧内容
Python爬虫框架Scrapy Scrapy框架 1.Scrapy框架安装 直接通过这里安装scrapy会提示报错: error: Microsoft Visual C++ 14.0 is requ ...
- mysql主从复制常见故障解决
一.主从复制常见故障 1.从库已存在数据库,主库建立同名库导致从库同步失败.报错如下: mysql> show slave status\G*************************** ...
- mac系统 Xcode打包ionic项目(iOS)
一.环境搭建 1. 安装Node.js,使用node -v 查询版本号: 2. 安装ionic: $ sudo npm install -g cordova(可以指定版本,如cordova@7.0.1 ...
- msp430学习笔记-实现开方log等计算及FFT算法(待续)
MSP430 FFT算法实现 http://bbs.21ic.com/icview-391532-1-1.html http://blog.sina.com.cn/s/blog_6cd2030b010 ...
- Release Notes for XE5
开发者之前说明 http://docwiki.embarcadero.com/RADStudio/XE5/en/Release_Notes_for_XE5
- linux 服务器之间配置免密登录
客户机:172.16.1.2 远程机:172.16.1.3 1.远程机 a.允许root用户通过22端口登录 vi /etc/ssh/sshd_config PORT 22 PermitRootLog ...