python flask ajax_Python Flask前后端Ajax交互的方法示例

之前总结过flask里的基础知识,现在来总结下flask里的前后端数据交互的知识,这里用的是Ajax

一、 post方法

1、post方法的位置:在前端HTML里,绑定在一个按钮的点击函数里,或者一个鼠标输入框点击离开事件。

(1)数据附在URL里(请求路径),发送到后端。

/*前端HTML

$.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/", methods=['GET', 'POST'])

def js_post(ip):

print ip

return ip +" - ip"

点击按钮后的效果:

2018731142505546.png?2018631142516

前端定义弹窗数据

2018731142528817.png?2018631142542

ip在URL里

(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!!!!'

2018731142618608.png?2018631142628

post独立数据发送

二、get方法(同样可以发数据)

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

后端路由接收处理:

@app.route('/js_get', methods=['GET'])

def js_get():

print "method: "+request.values['method']+" --- text: "+request.values['text']

return "get success!"

2018731142654193.png?201863114275

get成功

2018731142714776.png?2018631142724

数据接收成功

注意的是:其中后端py文件的类似request.values['method']的获取数据的request是一个Python flask的模块,需要导入。

总结:

在flask框架里,Ajax请求对于后端可以很容易实现,只需在后端Python代码中对ajax路径作出处理即可。

Ajax的post, get方法均可以向后台发送数据,只是一般用post发数据(做出改变),get请求数据(不改变)。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

本文标题: Python Flask前后端Ajax交互的方法示例

本文地址: http://www.cppcns.com/jiaoben/python/236218.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Python Flask是一个轻量级的Web应用框架,常用于构建快速原型和小型网站。Flask的核心在于其简单易用,能够方便地处理HTTP请求与响应,非常适合前后端分离架构中的后端开发。 在Flask中,前后端交互主要通过以下几种方式: 1. **RESTful API**(Representational State Transfer):Flask提供了丰富的路由功能,开发者可以通过定义URL映射和对应的视图函数(View Functions),来创建RESTful接口。客户端(如前端JavaScript或移动应用)发送HTTP请求到这些API,获取数据或者执行操作。 ```python from flask import Flask, jsonify app = Flask(__name__) @app.route('/api/users', methods=['GET']) def get_users(): users = [{'id': 1, 'name': 'Alice'}, {'id': 2, 'name': 'Bob'}] return jsonify(users) # 更复杂的接口示例,返回JSON格式的数据 @app.route('/api/products/<int:id>', methods=['GET']) def get_product(id): product_data = {'id': id, 'name': 'Product {}'.format(id)} return jsonify(product_data) ``` 2. **模板引擎**:Flask支持多种模板引擎(比如Jinja2),前端开发者可以在HTML文件中嵌入Python代码,从而动态渲染数据。前端可以通过Ajax等技术向服务器请求数据,并将接收到的数据插入到页面中。 ```html <!-- templates/index.html --> {% for user in users %} <li>{{ user.name }}</li> {% endfor %} ``` 在后端接收前端的AJAX请求并填充数据: ```python from flask import render_template_string @app.route('/users') def list_users(): users = [{'id': 1, 'name': 'Alice'}, {'id': 2, 'name': 'Bob'}] rendered_html = render_template_string('<ul>{% for user in users %} <li>{{ user.name }}</li> {% endfor %}</ul>', users=users) return rendered_html ``` 3. **WebSocket**:Flask扩展库如`Flask-SocketIO`或`Flask-WTF-Signature`可以实现双向通信,例如聊天应用、实时更新等功能。 ```python from flask_socketio import SocketIO app = Flask(__name__) socketio = SocketIO(app) @socketio.on('message') def handle_message(message): # 处理前端发送的消息 if __name__ == '__main__': socketio.run(app) ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值