Flask的jsonify模块、json前后端交互数据、$.ajax()方法详解

一、Flask中可以使用Python自带的json模块，也可以使用Flask中的jsonify

代码示例：

from flask import Flask, jsonify

app = Flask(__name__)

json_data = [
  {"name":"json", "age":123} 
]

@app.route('/jsontest', methods=['GET'])
def get_json():
  return jsonify({'data': json_data})      #使用jsonify之后会转成对象格式

app.run()

二、JSON 前后端交互数据

交互数据概念

当数据在浏览器和服务器之间交互时，数据只能是文本（也可以理解为字符串格式）
JSON属于文本，我们需要把JavaScript对象转换成JSON，然后将JSON发送到服务端，也可以从服务器将JSON发送到前端转换成JavaScript对象

将JavaScript对象转成JSON格式字符串使用JSON.stringify()

如果你的数据存储在JavaScript对象中，你需要把该对象转成JSON格式字符串,然后将其发送到服务器。使用JSON.stringify()
示例：
var myObj = { name:"Bill Gates",  age:62, city:"Seattle" };
var myJSON =  JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;

将JSON格式字符串转成JavaScript对象使用JSON.parse()

JSON格式接收到数据，将其转换成JavaScript对象，使用：JSON.parse()
示例：
var myJSON = '{ "name":"Bill Gates",  "age":62, "city":"Seattle" }';
var myObj =  JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;

三、$.ajax()方法详解（常用参数）

1.url    要求为String类型的参数，（默认为当前页地址）发送请求的地址     url: '/labels_csv/'
2.type   要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。    type: 'POST'
3.data   要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式      {"ta": ta_csv}
4.contentType    要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。  contentType:'application/json'
5.dataType     要求为String类型的参数，预期服务器返回的数据类型    dataType:'json'
6.success   要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
 (1)由服务器返回，并根据dataType参数进行处理后的数据。
 (2)描述状态的字符串。
success:function (data) {
              alert(data)
          }

示例：

  $.ajax({
          url:'',
          type:'post',
          data:pos,  //发送的数据
          contentType:'application/json',  //告诉后端你这次的数据是json格式
　　　　　　dataType:'json',
          success:function (data) {
              alert(data)
          }
      })

常用部分参数详解

1.type:get和post的区别
1.GET请求中将data数据附加在url后，POST请求将data数据发送给服务器。
2.POST请求必须设置请求头Content-Type值为application/x-form-www-urlencoded，默认是application/x-form-www-urlencoded

2.contentType：设置页面发送至服务器数据类型
四种常见的POST提交数据方式
(1)application/x-www-form-urlencoded     默认的
(2)multipart/form-data
(3)application/json     一般设置json格式数据
(4)text/xml

3.data：服务器返回的数据
GET请求中将data数据附加在url后，对象必须是key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为: ?foo1=bar1&foo2=bar2
如果是数组，例如{foo:["bar1","bar2"]}转换为:  ?foo=bar1&foo=bar2
POST请求将完整的数据传给前端页面

4.dataType:预期服务器返回的数据类型
xml:返回XML文档，可用JQuery处理
html:返回纯文本HTML信息，包含的script标签会在插入DOM时执行
script:返回纯文件JavaScript代码
json:返回JSON数据
text:返回纯文本字符串