前端与后端的数据交互(jquery ajax+python flask)
来源:互联网 发布:手机天猫淘宝 编辑:程序博客网 时间:2024/06/08 02:54
前排回忆一下遇到的坑:
1.<form>标签下的<input>、<textarea>等标签必须带有name属性才能被form捕捉提交。
2.POST方法提交时要用request.form来获取,而用GET方法则用request.args来获取。
本文从http://www.jianshu.com/p/4350065bdffe转载
前端与后端的数据交互,最常用的就是GET、POST,比较常用的用法是:提交表单数据到后端,后端返回json
- 前端的数据发送与接收
1)提交表单数据
2)提交JSON数据 - 后端的数据接收与响应
1)接收GET请求数据
2)接收POST请求数据
3)响应请求
前端的数据发送与接收
1. 提交表单数据
- GET请求
var data = { "name": "test", "age": 1};$.ajax({ type: 'GET', url: /your/url/, data: data, # 最终会被转化为查询字符串跟在url后面: /your/url/?name=test&age=1 dataType: 'json', # 注意:这里是指希望服务端返回json格式的数据 success: function(data) { # 这里的data就是json格式的数据 }, error: function(xhr, type) { }});
- POST请求
var data = {}# 如果页面并没有表单,只是input框,请求也只是发送这些值,那么可以直接获取放到data中data['name'] = $('#name').val()# 如果页面有表单,那么可以利用jquery的serialize()方法获取表单的全部数据data = $('#form1').serialize();$.ajax({ type: 'POST', url: /your/url/, data: data, dataType: 'json', # 注意:这里是指希望服务端返回json格式的数据 success: function(data) { # 这里的data就是json格式的数据 }, error: function(xhr, type) { }});
注意:A)参数dataType:期望的服务器响应的数据类型,可以是null, xml, script, jsonB)请求头中的Content-Tpye默认是Content-Type:application/x-www-form-urlencoded,所以参数会被编码为 name=xx&age=1 这种格式,提交到后端,后端会当作表单数据处理
2.提交JSON数据
如果要给后端传递json数据,就需要增加content-type参数,告诉后端,传递过来的数据格式,并且需要将data转为字符串进行传递。实际上,服务端接收到后,发现是json格式,做的操作就是将字符串转为json对象。
另外,不转为字符串,即使加了content-type的参数,也默认会转成name=xx&age=1,使后端无法获取正确的json。
# POST一个json数据var data = { “name”: "test", "age", 1}$.ajax({ type: 'POST', url: /your/url/, data: JSON.stringify(data), # 转化为字符串 contentType: 'application/json; charset=UTF-8', dataType: 'json', # 注意:这里是指希望服务端返回json格式的数据 success: function(data) { # 这里的data就是json格式的数据 }, error: function(xhr, type) { }});
后端的数据接收与返回
1.接收GET请求数据
name = request.args.get('name', '')age = int(request.args.get('age', '0'))
2.接收POST请求数据
接收表单数据
name = request.form.get('name', '')age = int(request.form.get('age', '0'))
接收Json数据
data = request.get_json()
另外,如果前端提交的数据格式不能被识别,可以用request.get_data()接收数据。微信公众号后台接收微信推送的xml格式的消息体,就可以用request.get_data()来接收
3.响应请求
Flask可以非常方便的返回json数据
from Flask import jsonifyreturn jsonify({'ok': True})
看一下源码就可以知道,jsonify就是帮我们做了点添加mimetype这样的杂事,所以如果不嫌麻烦和难看,你也可以这样写
# 太丑了,还是别这么干了return Response(data=json.dumps({'ok': True}), mimetype='application/json')
放两张截图来直观看一下请求
阅读全文
0 0
- 前端与后端的数据交互(jquery ajax+python flask)
- 前端和后端的数据交互(jquery ajax+python flask+mysql)
- 使用ajax完成python flask前端与后台数据的交互
- JS的Ajax与后端交互数据
- ajax使用,前端与后端交互
- Flask与ajax(jQuery)交互的几种方法:$.post、$.get、$.getJSON 、$.ajax、 $.load
- 基于websocket的前端与后端之间的数据交互
- Unity3d 前端与后端之间的数据交互
- Flask学习总结笔记(12) -- 利用ajax进行前后端数据交互
- Flask与Ajax前后端交互的跨域访问问题
- 前端 ,后端 关于数据交互的问题
- 使用postman模拟与后端flask的Get/Post数据交互
- Spring MVC前端与后端5种ajax交互方式
- Spring MVC前端与后端5种ajax交互方式
- Spring MVC前端与后端5种ajax交互方式
- Spring MVC前端与后端5种ajax交互方式
- jQuery和后端的JSON数据交互
- 浅谈SpringMVC后端与前端Ajax的五种交互方法
- Java定时器的使用
- Spring IOC
- 阿里巴巴Java开发手册及Java代码规约扫描eclipse插件安装
- [spark] Standalone模式下Master、WorKer启动流程
- Redis 脚本
- 前端与后端的数据交互(jquery ajax+python flask)
- Java(计算机编程语言)
- Android学习笔记(一):按钮点击事件的四种写法
- 图像分割之(四)OpenCV的GrabCut函数使用和源码解读
- springMVC helloworld
- 样式的优先级
- ubuntu jdk 版本切换
- 【web自动化测试-Robotframework-翻页功能之三】
- Optimization Options Reference