前端与后端的数据交互,最常用的就是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, json

B)请求头中的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()

get_json的源码.png

另外,如果前端提交的数据格式不能被识别,可以用request.get_data()接收数据。

微信公众号后台接收微信推送的xml格式的消息体,就可以用request.get_data()来接收

3. 响应请求

Flask可以非常方便的返回json数据

from Flask import jsonify

return jsonify({'ok': True})

jsonify源码

看一下源码就可以知道,jsonify就是帮我们做了点添加mimetype这样的杂事,所以如果不嫌麻烦和难看,你也可以这样写

# 太丑了,还是别这么干了

return Response(data=json.dumps({'ok': True}), mimetype='application/json')

放两张截图来直观看一下请求

post表单数据到服务端.png

Post JSON数据到服务端

python的前端和后端_前端与后端的数据交互(jquery ajax+python flask)相关推荐

  1. python数据分析要学多久_如何七周成为数据分析师18:Python的新手教程

    本文是<如何七周成为数据分析师>的第十八篇教程,如果想要了解写作初衷,可以先行阅读七周指南.温馨提示:如果您已经熟悉Python,大可不必再看这篇文章,或只挑选部分. Python是近年来 ...

  2. python后端数据发送到前端_前端与后端的数据交互(jquery ajax+python flask)

    前端与后端的数据交互,最常用的就是GET.POST,比较常用的用法是:提交表单数据到后端,后端返回json 前端的数据发送与接收 1)提交表单数据 2)提交JSON数据 后端的数据接收与响应 1)接收 ...

  3. python后端与前端数据交互_前端与后端的数据交互(jquery ajax+python flask)

    前端与后端的数据交互,最常用的就是GET.POST,比较常用的用法是:提交表单数据到后端,后端返回json 前端的数据发送与接收 1)提交表单数据 2)提交JSON数据 后端的数据接收与响应 1)接收 ...

  4. mysql前端还是后端_前端和后端哪个发展好点?

    前端和后端哪个工资高,哪个发展前景好?事实上,两个都是属于技术研发岗位,都是高薪有前途的职业,不存在说哪个工资更高些,都基本在一万到五万之间,工资的差别主要体现在个人技术上.要问做前端好还是做后端好? ...

  5. python人工智能框架有哪些_前端人工智能框架有哪些?

    摘要: 本文讲了10个热门的人工智能开源工具/框架. 下面是我们今天要讲的10个热门的人工智能开源工具/框架. 1.TensorFlow TensorFlow™是一个开源软件库,最初由Google B ...

  6. 前端实习生笔试_前端面试实习题目总结:

    以下是部分整理,有时间还会整理出其他的~~ (最近还在找实习呜呜~~) 1.JavaScript是一种弱类型语言,有什么优点和缺点 https://blog.csdn.net/sinolze... ( ...

  7. java和前端哪个好学_前端好学还是Java好学?

    学web前端 首先要了解前端是做什么的,web前端开发工程师,主要职责是利用 html,css,JavaScript,Flash等各种web技术进行客户端产品的开发.完成客户端程序(也就是浏览器端)的 ...

  8. 调用后台接口返回报错前端隐藏提示_前端异常监控解决方案研究(转)

    前端监控包括行为监控.异常监控.性能监控等,本文主要讨论异常监控.对于前端而言,和后端处于同一个监控系统中,前端有自己的监控方案,后端也有自己等监控方案,但两者并不分离,因为一个用户在操作应用过程中如 ...

  9. 前端实习生笔试_前端实习生面试题——HTML

    什么是浏览器内核,常用的浏览器的内核有哪些? 简单来说浏览器可以分为两部分,shell+内核.其中shell的种类相对比较多,内核则比较少.Shell是指浏览器的外壳:例如菜单,工具栏 等.主要是提供 ...

最新文章

  1. 正则表达式限制文本框只能输入数字,小数点,英文字母,汉字
  2. 安装Exchange2003时出0XC1037AE6错误的解决方法.
  3. Redis 的缓存异常处理 —— 缓存雪崩、缓存击穿、缓存穿透
  4. vuex的使用和封装
  5. java mariadb 使用,java连接mariaDB的设置,java连接mariadb
  6. 浪潮服务器系统套件,浪潮服务器随机套件版本列表
  7. 三维点云学习(5)5-实现Deeplearning-PointNet-2-classfication
  8. android用单元测试的多,AndroidStudio中对Android应用进行单元测试InstrumentationTestCase...
  9. modbus发送接收_自己编写MODBUS协议代码所踩过的坑
  10. python贪吃蛇手机版代码_200行python代码实现贪吃蛇游戏
  11. 工程桩进货指导(转)
  12. ns3安装 + eclipse
  13. 《货币金融学》期末复习题
  14. linux截屏 保存目录,linux设置截屏图片的保存路径
  15. VUE系列 ---- 网络模块axios(一 )
  16. 6个适合成年人的自学网站,每天半小时改变你一生
  17. Arduino开发教程
  18. 高清卫星影像DEM各个遥感卫星数据免费下载,3款软件4个网站推荐给你,从此不再为数据发愁
  19. EasyRecovery2022数据恢复软件稳定版及版本区别对比
  20. 手势操作TouchAction

热门文章

  1. Codeforces 1043F(容斥+dp)
  2. 一次失败的做题经历(HDU2112)
  3. 使用与不使用@RequestBody注解的区别
  4. python中的单例设计模式
  5. MySQL_采购入库价格与在线售价监控_20161213
  6. vs2010编译curl为static库及测试
  7. 改善C#公共程序类库质量的10种方法
  8. Linux 文件内容替换命令
  9. [转载] 生成对角矩阵 numpy.diag
  10. [转载] 1.1.1 Python常用的数学函数