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>

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

时间: 2024-08-08 17:49:56

flask+jsonp跨域前后台交互(接口初体验)的相关文章

JSONP -- 跨域数据交互协议

一.概念 ①传统Ajax:交互的数据格式——自定义字符串或XML描述: 跨域——通过服务器端代理解决. ②如今最优方案:使用JSON格式来传输数据,使用JSONP来跨域. ③JSON:一种数据交换格式.基于纯文本.被原生JS支持.    格式:两种数据类型描述符:大括号{ }.方括号[ ].分隔符逗号.映射符冒号.定义符双引好. ④JSONP:一种跨域数据交互协议,非官方. 1.Web页面调用js文件,可跨域.扩展:但凡有src属性的标签都具有跨域能力. 2.跨域服务器 动态生成数据 并存入js

jsonp跨域访问servlet接口获取json数组,并且渲染数据,前后端完整

啊哈哈哈哈哈哈哈哈哈哈哈我太激动了~ 其实这个工作我一直在拖延啊,就觉得哇,好难啊,不想做欸= = 然后硬着头皮研究了一整个下午+晚上终于搞清楚了~~~~哇哈哈哈哈~~~好神奇哈哈哈哈哈~~~(疯了吧!) json.jsonp.jQuery Ajax这些东西说定义我也不是特别研究,只懂个大概,就不去复制百科了,没意思. 一.先说我要做的事情的需求,上来就撸代码估计很多人懵逼(就像今天下午的我一样- -||) 意图:本地服务端servlet生成json数据,我想在前端获取json数据并渲染成列表显

jsonp跨域访问服务

前段时间在做产品开发的时候,需要与公司网站那边进行交互,我们所开发的产品上线后是放在一个域名下,公司网站那块是在另一个域名下,这样在页面中调用 网站那边的接口时就存在跨域的问题,当时为了不修改网站那边的接口,所以采用在服务端通过webservice方式进行调用网站接口,问题也很快解决了,当时我就在想 如果需要在js中直接访问的话,就涉及到到跨域的问题,那么怎么做才能解决这个问题呢,我上网找了一些资料,最后采用的是jsonp的方式来解决的.下面我来给大家分享下 用jsonp方式解决跨域问题.分为以

也谈跨域数据交互解决方案

先来句题外话,最开始Ajax应该是用来特指用XMLHttpRequest传输数据这门技术,但就像最近大家把一切web新技术都归到html5名下一样,现在一切异步获取数据的手段都被人称之为Ajax. 由于JavaScript同源策略的存在,跨域数据交互是个老生常谈的话题了.网上相关文章很多,不过随着时间的推移和浏览器的更新,一部分解决方案已经不适用了,同时也出现了一些更好的方法.抛开纯服务器Proxy这种跟前端没什么关系的方案不说,这里简单总结下常见的其他几种方式. JSONP JSONP是最常见

深入浅出:了解jsonp跨域的九种方式

什么是“”跨域”: 跨域访问,简单来说就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容.由于安全原因,跨域访问是被各大浏览器所默认禁止的.当一个域与其他域建立了信任关系后,2个域之间不但可以按需要相互进行管理,还可以跨网分配文件和打印机等设备资源,使不同的域之间实现网络资源的共享与管理.这就形成了“跨域”. 广义的跨域: 1.) 资源跳转: A链接.重定向.表单提交2.) 资源嵌入: <link>.<script>.<img>.&l

JSONP跨域的原理解析

JSONP跨域的原理解析 一种脚本注入行为 在 2011年10月27日 那天写的     已经有 99238 次阅读了 感谢 参考或原文 JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源策略).这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容. JavaScript这个安全策略在进

【转】JSONP跨域的原理解析

JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容. JavaScript这个安全策略在进行多iframe或多窗口编程.以及Ajax编程时显得尤为重要.根据这个策略,在baidu.com下的页面中包含的JavaScript代码,不能访问在

jsonp 跨域原理详解

JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容. JavaScript这个安全策略在进行多iframe或多窗口编程.以及Ajax编程时显得尤为重要.根据这个策略,在baidu.com下的页面中包含的JavaScript代码,不能访问在

ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据的传递

前言 最近公司项目进行架构调整,由原来的三层架构改进升级到微服务架构(准确的说是服务化,还没完全做到微的程度,颗粒度没那么细),遵循RESTFull规范,使前后端完全分离,实现大前端思想.由于是初次尝试,中途也遇到了不少问题.今天就来讨论一下其中之一的问题,WebAPI与前端Ajax 进行跨域数据交互时,由于都在不同的二级域名下(一级域名相同),导致Cookies数据无法获取. 最开始通过头部(Header)将Cookies传输到其WebAPI,也能解决问题. 下面讲述另外一种解决方案. 解决过