Ajax跨域访问Flask构建的Python Web服务器

看到标题,你可能会觉得作者比较奇葩,为什么要把事情搞得这么复杂?其实作者也不想这样,只是去年已经用PHP搭建好了系统,而且功能、UI等也基本调试的差不多了;现在要借助Python强大而方便的数据分析功能来分析数据,最简单直接的也就是这么做了。或许之后,会考虑用Django等来重构整个系统,但这并不是现在的重点。

利用Ajax跨域访问Flask服务器

Web前端通过Ajax请求Flask服务器的接口:

<script type="text/javascript">
    $(document).ready(function(){
        $("#click_demo").click(function(){
            //http request
            $.post("http://127.0.0.1:8080/demo",
            {
               name:$("#param").text(),
            },
            function(data,status){
                //alert("status:" + status + "\ndata:" + data);
                var myobj=eval(data);
                var result='';
                for (var i = 0;i < myobj.length;i++) {
                    var item='<p>'+myobj[i].name+'</p>';
                    result=result+item;
                }
                $("#result-element")[0].innerHTML=result;
                $("#result-element").show();
            });
        });
    });
</script>

Ajax跨域请求的时候可以在服务端设置header信息,来达到跨域请求的目的(不需要通过jsonp的方式设置ajax参数):

Response.AddHeader("Access-Control-Allow-Origin", "*");

Flask服务器端代码如下:

@app.route('/demo', methods=['POST'])
def home():
    result_json = json.dumps(result)
    # Response
    resp = Response(result_json)
    resp.headers['Access-Control-Allow-Origin'] = '*'
    return resp

Python操作Json

JSON (JavaScript Object Notation), specified by RFC 7159 (which obsoletes RFC 4627) and by ECMA-404, is a lightweight data interchange format inspired by JavaScript object literal syntax (although it is not a strict subset of JavaScript).

import json

list1 = [20, 6, 15, 53, 47]
list2 = [(6, 'John', '20'), (20, 'David', '21'), (47, 'Amy', '23'), (15, 'Kim', '18'), (53, 'Mary', '20')]

list3 = []
for a in list2:
    dict = {}
    dict['id'] = a[0]
    dict['name'] = a[1]
    dict['age'] = a[2]
    list3.append(dict)
result = {}
result['id'] = list1
result['data'] = list3

json1 = json.dumps(list1)
json2 = json.dumps(list2)
json3 = json.dumps(list3)
json4 = json.dumps(result)
print(json1)
print(json2)
print(json3)
print(json4)

decode = json.loads(json4)
print(decode)

JS解析Json数据

<SCRIPT LANGUAGE="JavaScript">
    var t="{'firstName': 'cyra', 'lastName': 'richardson', 'address': { 'streetAddress': '1 Microsoft way', 'city': 'Redmond', 'state': 'WA', 'postalCode': 98052 },'phoneNumbers': [ '425-777-7777','206-777-7777' ] }";
    var jsonobj=eval('('+t+')');
    alert(jsonobj.firstName);
    alert(jsonobj.lastName);


    var t2="[{name:'zhangsan',age:'24'},{name:'lisi',age:'30'},{name:'wangwu',age:'16'},{name:'tianqi',age:'7'}] ";
    var myobj=eval(t2);
    for(var i=0;i<myobj.length;i++){
        alert(myobj[i].name);
        alert(myobj[i].age);
    }

    var t3="[['14113295100','社旗县国税局桥头税务所','社旗县城郊乡长江路西段']]";
    //通过eval()函数可以将JSON字符串转化为对象
    var obj = eval(t3);
    for(var i=0;i<obj.length;i++){
        for(var j=0;j<obj[i].length;j++){
            alert(obj[i][j]);
        }
    }
</SCRIPT>

参考资料:

Ajax跨域请求

How do I set response headers in Flask?

Flask API

Python操作json的API

JS解析json数据(如何将json字符串转化为数组)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,110评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,443评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,474评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,881评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,902评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,698评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,418评论 3 419
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,332评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,796评论 1 316
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,968评论 3 337
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,110评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,792评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,455评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,003评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,130评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,348评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,047评论 2 355

推荐阅读更多精彩内容