python 获取前端传入参数 前端调用python

description: 使用了jQuery的ajax，Python的Flask库和Flask的跨域包flask-cors

1. 安装依赖包

通过豆瓣源安装对应包

pip install 包名 -i http://pypi.douban.com/simple/ --trusted-host pypi.douban.com

2. 启动Python的Flask

from flask import Flask
app = Flask(__name__)
@app.route('/hello')#这个是对函数的注解
def hello_world():
    return "hello world"
if __name__=='__main__':
    app.run()

运行一下，控制台出现

说明已经布置完成，**字符串hello world**被发送到了localhost:5000/hello

此时直接访问/爬取都能直接获取"hello world"

3. ajax获取Flask发送的信息

$.ajax({
        type : "get",
        async : false,     //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url : "",    //服务器端放出api的地址，一般是把数据以json格式放出
        data : {},
        dataType : "json",        //返回数据形式为json
        success : function(result) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            }
        },
        error : function() {//请求失败时执行该函数
        }
    })

重点在url。

1. 如果js文件一起部署到了localhost:5000，那么直接填"/hello"即可
2. 如果是外部js文件，那么需要填完整路径http://localhost:5000/hello.同时，解决跨域问题，否则会报错

Access to XMLHttpRequest at ‘http://localhost:5000/api/msg’ from origin ‘http://localhost:63342’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

问题一：解决跨域问题

py引入flask-cors包，并用CORS包裹app即可，需要写上完整路径，http://不要忘记

from flask import Flask
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
@app.route('/hello')
def hello_world():
    return "hello world"
if __name__=='__main__':
    app.run()

此后，ajax即可接受到hello world

问题二：访问成功，ajax仍然error请求失败

这有可能是dataType参数的原因。

因为有时候（刚刚）上传的数据是str类型，如果dataType设置成json，那么就接受不到数据，就会转到error

4. Python上传各种格式数据

一般来说，前端主要接受json和str类型的数据，最多的是json，所以一般在Python中先将数据处理一下再上传

Python的非常优秀的数据处理语言，这取决于它有各种数据分析的库，如numpy、pandas等

Python中可以做以下事情：

• flask只能上传str类型的数据，但上传json格式的字符串可以被ajax识别成json类型
• 可通过pandas将其他类型的数据转为str或json
• 在Python中把数据处理好后传给前端。这样前端接受数据后就不需要再处理数据，或者简单处理数据就可以直接用了

5. 例：用echarts显示csv的数据

• Python

from flask_cors import CORS
import pandas as pd
from flask import Flask
app = Flask(__name__)
CORS(app)
@app.route('/data/data1')#以上是跨域部署服务器及url
def xianlu():
    #读取csv文件，第一列作为索引，dataSet是DataFrame的类型
    dataSet = pd.read_csv('DataA09/station.csv', index_col=0)
    #统计各线路的人次，保存在Series中
    array=pd.Series(dataSet['线路'].value_counts())
    #将{线路:人次}转为json
    json_split=array.to_json(orient='split')
    return json_split

if __name__=='__main__':
    app.run()

解析：csv文件如下图所示

• dataSet：以编号为行索引，以"站点名称"、“线路”、"行政区域"为列索引。索引不算作数据内容



• array：线路的人次。转为DataFrame的目的是可以转成json



• json_split：Series是pandas中保存一维数组的类型。而DataFrame对应的是多维数组
  Series转为json有很多种形式，这里选择split比较合适。保存在json中的中文以Unicode编码，会看上去乱码。

• html：

<div class="b_right_box">
    <div id="chart_5" class="echart" style="width: 100%; height: 3.6rem;"></div>
</div>

• JavaScript：这里要注意，echarts接受的数据一般是Array类型的，不然可能报各种错

function echart_5() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('chart_5'));

    $.ajax({
        type : "get",
        async : false,            
        url : "http://127.0.0.1:5000/data/data1",   
        data : {},
        dataType : "json",        //返回数据形式为json
        success : function(result) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            var data = result;//data是str类型的json数据
            if (data) {
                let index=data["index"]
                let values=data["data"]

                myChart.hideLoading();    //隐藏加载动画
                myChart.setOption({        //加载数据图表
                    xAxis: {
                        type: 'category',
                        data: index,
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [{
                        data: values,
                        type: 'bar',
                        barWidth: "35%",
                    }]
                });
            }

        },
        error : function() {
            alert("错误")
        }
    })
}