前端与后端数据交互 jQuery Ajax+Python Flask (附详细代码)

布满荆棘的人生 2024-04-18 18:57 67阅读 0赞

回忆一下遇到的坑:

1.<form>标签下的<input>、<textarea>等标签必须带有name属性才能被form捕捉提交。

2.**POST**方法提交时要用request.form来获取,而用**GET**方法则用request.args来获取。

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

![1240][]

另外，如果前端提交的数据格式不能被识别，可以用 request .get_data()接收数据。 
       微信公众号后台接收微信推送的 xml格式的消息体，就可以用 request .get_data()来接收

## 3.响应请求 ##

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

from Flask import jsonify 
       
       return jsonify({ 'ok': True})

![1240 1][]

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

# 太丑了，还是别这么干了 
       return Response(data=json.dumps({ 'ok': True}), mimetype= 'application/json')

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

![1240 2][]

![1240 3][]

[1240]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/0c96efd9870f4c798a05ec4c3cb8eed0.png
[1240 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/11bc564eb83144aab522e20c8d6524b4.png
[1240 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/f22132161f8a4e939528a3b449bead41.png
[1240 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/f749ea519d994a74a3b4e7a0d73fa4ce.png