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只能读取同域下的窗口属性,即同源策略.而跨域就是通过某些手段来绕过同源策略限制,实 ...
随机推荐
- Eclipse上安装springsource-tool-suite(转)
Eclipse上安装springsource-tool-suite 版本必须匹配. spring tool suite 是一个基于eclipseIDE开发环境中的用于开发spring应用程序的工具.提 ...
- C++中关于标准输出流cout中使用递增运算符的问题
今天听同学提起一个问题,在C++中运行下面的语句会得到什么结果: ; cout << a++ << a++ << a++; 起初我个人想当然地认为会输出012,然而 ...
- Python爬虫----抓取豆瓣电影Top250
有了上次利用python爬虫抓取糗事百科的经验,这次自己动手写了个爬虫抓取豆瓣电影Top250的简要信息. 1.观察url 首先观察一下网址的结构 http://movie.douban.com/to ...
- 安装g++,在centos上执行yum -y install gcc gcc-c++ libstdc++-devel
Loaded plugins: fastestmirror, security Loading mirror speeds from cached hostfile * base: mirrors.1 ...
- eclipse中package explore和project explore 怎么相互切换???
window--->show view--->other---->Java---->Package Explorer或者选project explore之后就可以相互切换了
- wlan经常掉线怎么办?
有没有这样的情款,好好的网络总是突然断掉然,之后就需要重新连接,连接以后没多久有需要重新连接.本次经验就来和大家一起分享一下几种情况的解决方法,非常的简单实用. 工具/原料 电脑 电源设置问题 1.本 ...
- web应用程序安全攻防---sql注入和xss跨站脚本攻击
kali视频学习请看 http://www.cnblogs.com/lidong20179210/p/8909569.html 博文主要内容包括两种常见的web攻击 sql注入 XSS跨站脚本攻击 代 ...
- NNI (Neurol Network Intelligence) 是微软开源的自动机器学习工具
NNI (Neurol Network Intelligence) 是微软开源的自动机器学习工具 https://www.cnblogs.com/ms-uap/p/9719071.html [重磅]微 ...
- YII缓存之数据缓存
1.开启缓存组件 2. ================ 二 先在配置文件components数组中加上: 'cache'=>array( 'class'=>'CFileCache'), ...
- 在WORD2007中添加修改组件
从网上查到这个,但不知道怎么设置选项内容,及如何出现选项.能否详细说明下,谢谢!1).在开始操作前,请先点击窗口左上角的office按钮,打开word选项,在常规窗口中,勾选在功能区显示开发工具选项卡 ...