python-flask前端后端之间的数据通信

通过websocket实现

本例子的websocket通过socket.io实现

前端:

采用javascript编写前端的活动代码。前端必须包含库socket.io

• html为

<script src="{{url_for('static', filename='js/socket.io.js')}}"></script>

• javascript为

var namespace='/';
socket = io.connect(location.protocol+"//"+document.domain+":"+location.port+namespace);//建立一个io
socket.emit("myname",UserName);//向后端发送消息"myname" 消息携带数据"用户名"
socket.on("notify",function(data){
        msg.innerText="服务器消息："+data.value;
    });//响应服务器消息"notify", 消息的数据为data

后端

python-flask+falsk-socktio编写后端

@socketio.on('myname',namespace='/')#响应消息
def onMyname(data):
    USERS[request.sid]=data
    print('用户情况',USERS)
socketio.emit("notify",msg)#发送消息

通过表单实现：

前端：

采用javascript编写前端的活动代码。

<form method="post" action="login">
    Name：<input type="text" name="name"/>
    PassWord:<input type="password" name="password"/>
    <input type="submit" value="Submit"/>
</form>

说明：method发送表单数据方式关键字，一般表单用post方式，而参数用get方式。action为响应该消息的后台的动作函数，该login表示路径对应的函数。

后端：

python-flask编写后端。

@app.route('/login', methods=['post'])
def login():
    name = request.form.get('name')
    password = request.form.get('password')
    if name == 'admin' and password == '123':
        return render_template('test1.html', name=name)
    return render_template('test1.html')

说明：这个login也就是后台的动作函数的路径，method就是获得数据的方式

通过http原始数据发送方式实现

前端：

function login(){
	var xmlhttp;
	if (window.XMLHttpRequest) {xmlhttp=new XMLHttpRequest();}
	//  IE7+, Firefox, Chrome, Opera, Safari 浏览器创建xmlhttp
	else {xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
	// IE6, IE5 浏览器创建xmlhttp
	xmlhttp.open("POST","/login",true);
	xmlhttp.setRequestHeader("Content-type","application/json");
	xmlhttp.send(data_json);
}

说明：
xmlhttp.open用于打开一个xmlhttp，该xmlhttp发送数据方式为post，响应的路径为/login;
setRequestHeader用于设置xlmhttp发送数据的格式，此处为json.

后端：

@app.route("/login",methods=['POST'])
def login():
    data = request.get_data()
    json_data = json.loads(data)
    return 'json_data'

此处用request的get_data函数，也可以用get_json()

json_data = request.get_json()
# 注: get_json()  会自动将json数据转换为字符串,还有POST请求需要设置请求头发送参数为application/json格式,才可以接收到
#如果没有设置成json格式发送,请使用get_data接收参数