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只能读取同域下的窗口属性,即同源策略.而跨域就是通过某些手段来绕过同源策略限制,实 ...
随机推荐
- maven install时自动施行单元测试
maven install时自动执行单元测试 1.maven-surefire-plugin简介 Maven本身并不是一个单元测试框架,它只是在构建执行到特定生命周期阶段的时候,通过插件来执行JUni ...
- ng 自定义过滤器的创建和使用
过滤器的本质就是一个方法,参数就是输入的值以及给过滤器指定的参数,返回值就是处理后要显示的值. ①过滤器创建var app = angular.module();app.filter(‘名称’,fun ...
- linux 压缩文件 上传下载 直接弹出
yum -y install lrzsz rz -y 上传 sz -y 下载 -y 是替换了直接,不加的话,如果目录下有同名文件,会提示
- easyui1.4 汉化出问题
easyui 1.4 的textbox 验证汉化不了,需要在easyui-lang-zh_CN.js 加入 if ($.fn.textbox){ $.fn.textbox.defaults.missi ...
- 1132. Cut Integer (20)
Cutting an integer means to cut a K digits long integer Z into two integers of (K/2) digits long int ...
- vba传递参数类型错误
先来看看微软官方的说明: 目录内容 概要 解决方案 详细信息 重现问题的步骤 &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; ...
- jquery选择器 之 获取父级元素,子元素,同级元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href ...
- ⑤SpringBoot之定时任务
本文介绍SpringBoot定时任务的使用,springboot默认已经帮我们实行了,只需要添加相应的注解就可以实现. 1.pom配置文件 pom包里面只需要引入springboot starter包 ...
- Java 成员方法的定义
方法的定义: 方法是类或对象的行为特征的抽象. Java中的方法不能独立存在,所有的方法必须定义在类中. 使用 “类名.方法” 或 “对象.方法” 的形式调用. 语法格式: 权限修饰符 返回值类型 方 ...
- 导出csv xls文件数字会自动变科学计数法的解决方式
将数据导出excel文件变成科学计数法问题: 分析: 用程序导出的csv文件,当字段中有比较长的数字字段存在时,在用excel软件查看csv文件时就会变成科学技术法的表现形式. 其实这个 ...