flask+jsonp跨域前后台交互(接口初体验)

1 # -*- coding: utf-8 -*-
2 from flask import Flask, jsonify
3 import psutil, time,json
4
5 app = Flask(__name__)#实例化app对象
6
7 @app.route('/test_post/aa', methods=['GET','POST'])#路由
8 def test_post():
9
10 memKeys = ["total", "available", "percent", "used", "free"]#查看内存信息
11 memVaules = psutil.virtual_memory()
12 memInfo = dict(zip(memKeys, memVaules))
13 memInfo = {k: str(v / pow(1024.0, 3)) + 'GB' for k,
14 v in memInfo.items() if k != 'percent'}
15 memInfo['percent'] = psutil.virtual_memory().percent
16 return "successCallback"+"("+json.dumps(memInfo)+")"#将结果以json形式返回,通过jsonp与前台交互
17
18
19
20 if __name__ == "__main__":
21 app.run(
22 host = '0.0.0.0',#任何ip都可以访问
23 port = 7777,#端口
24 debug = True
25 )

接下来是前台代码

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script>
$('#search').click(function () {
$.ajax({
type: 'GET',
url: 'http://192.168.1.106:7777/test_post/aa',
dataType: 'jsonp', //希望服务器返回json格式的数据
jsonp: "callback",
jsonpCallback: "successCallback",//回调方法
success: function (data) {
console.log(data);
} });
});
</script>

接下来就可以看到控制台数据了

flask+jsonp跨域前后台交互(接口初体验)的更多相关文章
- JSONP -- 跨域数据交互协议
一.概念 ①传统Ajax:交互的数据格式——自定义字符串或XML描述: 跨域——通过服务器端代理解决. ②如今最优方案:使用JSON格式来传输数据,使用JSONP来跨域. ③JSON:一种数据交换格式 ...
- jquery中的jsonp跨域调用(接口)
jquery jsonp跨域调用接口
- (三)ajax请求不同源之jsonp跨域
凡是拥有"src"这个属性的标签都具有跨域的能力,比如<script>.<img>.<iframe>. JS中,我们直接用XMLHttpRequ ...
- 前端跨域问题相关知识详解(原生js和jquery两种方法实现jsonp跨域)
1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...
- 深入浅出:了解jsonp跨域的九种方式
什么是“”跨域”: 跨域访问,简单来说就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容.由于安全原因,跨域访问是被各大浏览器所默认禁止的.当一个域与其他域建立了信 ...
- jsonp跨域+ashx(示例)
前言 做B/S项目的时候,我们一般使用jquery+ashx来实现异步的一些操作,比如后台获取一些数据到前台,但是如果ashx文件不在本项目下,引用的是别的域下的文件,这时候就访问不了.关于jsonp ...
- JSONP跨域的原理解析( 一种脚本注入行为)
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制, 被称为“some-Origin Policy”(同源策略).这一策略对于Jav ...
- JSONP跨域的原理解析
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same- Origin Policy”(同源策略).这一策略对于Jav ...
- Jsonp跨域访问原理和实例
>>什么是跨域 出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,当前域名的js只能读取同域下的窗口属性,即同源策略.而跨域就是通过某些手段来绕过同源策略限制,实 ...
随机推荐
- SQL中合并两个表的JOIN语句
SQL里有四种JOIN语句用于根据某条件合并两个表: (INNER) JOIN: 交集 LEFT (OUTER) JOIN: 左表数据全包括,右表对应的如果没有就是NULL RIGHT (OUTER) ...
- Python打包上传
你可以用pip导出你的dependency: $ pip freeze > requirements.txt 然后在通过以下命令安装dependency: pip install -r requ ...
- 老师木发的makefile与autotools
makefile http://scc.qibebt.cas.cn/docs/linux/base/%B8%FA%CE%D2%D2%BB%C6%F0%D0%B4Makefile-%B3%C2%F0%A ...
- BZOJ - 2460 :元素 (贪心&线性基)
相传,在远古时期,位于西方大陆的 Magic Land 上,人们已经掌握了用魔法矿石炼制法杖的技术.那时人们就认识到,一个法杖的法力取决于使用的矿石.一般地,矿石越多则法力越强,但物极必反:有时,人们 ...
- 设计模式之访问者(visitor)模式
在患者就医时,医生会根据病情开具处方单,很多医院都会存在以下这个流程:划价人员拿到处方单之后根据药品名称和数量计算总价,而药房工作人员根据药品名称和数量准备药品,如下图所示. 在软件开发中,有时候也需 ...
- Python基本特殊方法之__format__
__format__()方法 __format__()传参方法:someobject.__format__(specification) specification为指定格式,当应用程序中出现&quo ...
- bzoj 2131 免费的馅饼
Written with StackEdit. Description Input 第一行是用空格隔开的二个正整数,分别给出了舞台的宽度\(W\)(\(1\)到\(10^8\)之间)和馅饼的个数\(n ...
- Elasticsearch.net项目
Elasticsearch.net项目实战 https://www.cnblogs.com/lucky_hu/p/9746736.html elasticsearch.net项目实战 @智客幸达 目录 ...
- 快速沃尔什变换FWT
快速沃尔什变换\(FWT\) 是一种可以快速完成集合卷积的算法. 什么是集合卷积啊? 集合卷积就是在集合运算下的卷积.比如一般而言我们算的卷积都是\(C_i=\sum_{j+k=i}A_j*B_k\) ...
- 前端工程师面试问题归纳(一、问答类html/css/js基础)
一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...