Ajax+Flask+Electron实现数据传输的一些总结

最新推荐文章于 2024-05-04 09:28:29 发布

阿哥我

最新推荐文章于 2024-05-04 09:28:29 发布

阅读量436

点赞数

分类专栏： Electron+WebGL+Python 文章标签： Ajax jQuery Flask JSON 前后端交互

本文链接：https://blog.csdn.net/honorbang/article/details/113833315

版权

Electron+WebGL+Python 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前端

引入jquery：

前端代码：

function calculate() {
	var data = $("Graph").contentWindow.GeometryData();
	$.ajax({
		type: "POST",
		url: 'http://127.0.0.1:8080/cal',
		data: JSON.stringify(data),
		timeout: 3500,
		success: function (result) {
			alert("CalSection Success!")
			var jsonRes = eval("(" + result + ")");
		},
		error: function (xhr, state, errorThrown) {
			console.log("error")
		}
	});
}

前端注意事项：
1.url处最好写完整的路径，可能无法识别相对的路径（即/cal）
2.dataType可以不写，ajax可以自行识别，写的话一定要准确，否则可能报Internet错误（500Error/Internet Refused等）
3.字符串装转换为json的方法有许多：JSON.parse（），eval()等
值得注意的是JSON.parse（）对数据要求很高，要求数据的双引号等各种细节都要正确，否则会报错。所以在不是很有把握的情况下可以用eval("(" + result + “)”)进行转化。

后端代码：

from flask import Flask, render_template,request      
import simplejson,json,sys
app = Flask(__name__)
@app.route("/cal",methods=['POST','GET'])
def ReadJSON():
    a = request.get_data()#获取原始数据类型，字符串格式，直接传过去在ReadData读取即可
    dict1 = json.loads(a)       #加载为list
	    
	--------------该处省略python算法--------------

    return json.dumps({"A":A,"Iy":Iy,"Iz":Iz,"J":J,"Iw":Iw,"yc":yc,"zc":zc,"betay":betay,"betaz":betaz,"betaw":betaw,"Iyz":Iyz}) 
    
if __name__ == "__main__":
# 启动, 启动后访问 http://127.0.0.1:8080 查看
app.run(debug=True,host='127.0.0.1', port=8080)

后端注意事项：
1.request获取前端数据的时候要使用正确的方法，如果方法不正确可能报错，因为有些方法只适用于post而不适用于get
2.返回的数据必须要和ajax的dataType相同，否则会报网络错误。最好的方法是统一使用json传递和读取。
3.dubug=True可以自行刷新，否则需要手动刷新。

一点感想：
第一次接触后端和ajax还是花了不少时间进行学习，但是由于时间问题没能系统性地学，都是东拼西凑地学，感觉效率不高，同时bug很多。感觉以后新接触一样东西可以先去浏览官方地文档和例子，再去看下视频见识下实例操作，最后再自己动手和模仿。