Python Flask实现前后端Ajax数据交互详解

纸上星河

发布时间：2026-10-13| 5人浏览过

原创

本文详细解析Python Flask框架中前后端通过Ajax进行数据交互的实现方式。重点介绍POST和GET两种请求方法在前端HTML中的绑定技巧及后端路由处理逻辑，涵盖数据附于URL与独立发送两种场景，并提供完整的代码示例与注意事项，帮助开发者快速掌握Flask下的异步通信机制。

此前已梳理过Flask的基础知识，本节重点总结Flask框架下前后端通过Ajax进行数据交互的具体实现方法。

一、POST方法

1. POST方法的触发位置：在前端HTML代码中，通常绑定在按钮的点击事件函数内，或者输入框的失去焦点（blur）事件中。

（1）将数据附加在URL（请求路径）中发送至后端。

/*前端HTML<script>里：*/
$.post("/js_post/"+ip, data_to_backend, function(data){alert("success "+data)} );

其中，变量ip和data_to_backend需在代码前预先定义；data_to_backend通常为一个JSON格式数据(data_to_backend={'ip':$(this).parent().prev().text()})，而data则是后端返回的结果。

#后端py文件(路由启动前面的html的py文件)里：添加一个路由处理前端post请求
@app.route("/js_post/<ip>", methods=['GET', 'POST'])
def js_post(ip):
   print ip
   return ip +" - ip"

点击按钮后的运行效果如下：

前端定义的弹窗数据展示

URL中包含ip参数

（2）将数据作为独立参数发送给后端。

var ip = $(this).parent().prev().prev().prev().prev().text();
data_tmp = {'ip':ip, 'text':"success for ajax"};  // data to send to server.
$.post('/js_call', data_tmp, function(data){alert(data)});

后端处理该请求的程序逻辑如下：

@app.route('/js_call', methods=['GET', 'POST'])
def js_call():  
   print request.values['ip']  
   print request.values['text']  
   # to send the command by ssh : os.system("ssh user@host \' restart(command) \' ")  
   return 'ok!!!!'

POST独立数据发送示例

二、GET方法（同样可用于发送数据）

$.get('/js_get', {'method':'GET', 'text':"from-html"}, function(data){alert(data)})

后端路由接收并处理GET请求的代码如下：

@app.route('/js_get', methods=['GET'])
def js_get():
  print "method: "+request.values['method']+" --- text: "+request.values['text']
  return "get success!"