一、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:返回纯文本字符串