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

回忆一下遇到的坑:

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()
 
 

 
 

   
   

    
    

   
   
   
   

    
    

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

   
   

    
    

   
   
   
   

    
    

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

3.响应请求

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

 
 

   
   

    
    

   
   
   
   

    
    

     
     from Flask 
     
     import jsonify
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     return jsonify({
     
     'ok': 
     
     True})
    
    
   
   
 
 

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

 
 

   
   

    
    

   
   
   
   

    
    

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

   
   

    
    

   
   
   
   

    
    

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

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