JSON 的正确用法:Python、MongoDB、JavaScript与AjaxJSON 的正确用法:Python、MongoDB、JavaScript与Ajax
本文主要总结网站编写以来在传递 JSON 数据方面遇到的一些问题以及目前采用的解决方案。网站数据库采用 MongoDB,后端是 Python,前端采用“半分离”形式的 Riot.js,所谓半分离,是说第一页数据是通过服务器端的模板引擎直接渲染到 HTML 中,从而避免首页两次加载的问题,而其它动态内容则采用 Ajax 加载。整个流程中数据都是通过 JSON 格式传递的,但是在不同的环节中需要采用不同的方式并遇到一些不同的问题,本文主要做记录、总结。
1. What is JSON?
JSON(JavaScript Object Notation) 是一种由道格拉斯·克罗克福特构想设计、轻量级的数据交换语言,它的前辈 XML 可能更早被人们所熟知。当然 JSON 并不是为了取代 XML 而存在的,只是相比于 XML 它更小巧、更适合在网页开发中用作数据传递(JSON 之于 JavaScript 就像 XML 之于 Lisp)。从名字上可以看出,JSON 的格式符合 JavaScript 语言中“对象”的语法格式,除了 JavaScript 之外,很多其他语言中也具有类似的类型,例如 Python 中的字典(dict
),除了编程语言之外,一些基于文档存储的 NoSQL 非关系型数据库也选择 JSON 作为其数据存储格式,例如 MongoDB。
总的来说,JSON 定义一种标记格式,可以非常方便地在编程语言中的变量数据与字符串文本数据之间相互转换。JSON 描述的数据结构包括以下这几种形式:
- 对象:
{key: value}
- 列表:
[obj, obj,...]
- 字符串:
"string"
- 数字:数字
- 布尔值:
true
/false
了解了 JSON 的基本概念之后,下面分别针对上图中的几个数据交互环节进行总结。
2. Python <=> MongoDB
Python 与 MongoDB 之间的交互主要由现有的驱动库提供支持,包括 PyMongo、Motor 等,而这些驱动所提供的接口都是非常友好的,我们不需要了解任何底层的实现,只要对 Python 原生的字典类型进行操作即可:
import motor
client = motor.motor_tornado.MotorClient()
db = client['test']
user_col = db['user']
user_col.insert(dict(
name = 'Yu',
is_admin = True,
))
唯一需要注意的是 MongoDB 中的索引项 _id
是通过 ObjectId("572df0b78a83851d5f24e2c1")
存储的,而对应的 Python 对象为 bson.objectid.ObjectId
,因此在查询时需要以此对象的实例进行:
from bson.objectid import ObjectId
user = db.user.find_one(dict(
_id = ObjectId("572df0b78a83851d5f24e2c1")
))
3. Python <=> Ajax
前端与后端之间的数据交流比较常用的是通过 Ajax 完成,这时遇到了第一个不大不小的坑。在之前的一篇文章中,我总结了一次 Python 编码的坑,我们知道 HTTP 传递过程中肯定不存在 JSON/XML ,一切都是二进制数据,但是我们可以选择让前端用什么样的方式解读这些数据,即通过设定 Header 中的 Content-Type
,一般传递 JSON 数据时将其设定为 Content-Type: application/json
,在 Tornado 最新版本中,只需要直接写入字典类型即可:
# Handler
async def post(self):
user = await self.db.user.find_one({})
self.write(user)
于是迎来了第一个错误:TypeError: ObjectId('572df0b58a83851d5f24e2b1') is not JSON serializable
。追溯原因,虽然 Tornado 帮我们简化了操作,但在像 HTTP 中写入字典类型时仍然需要经历一次 json.dumps(user)
操作,而对于 json.dumps
来说,ObjectId
类型是非法的。于是我选择了最直观的解决方案:
import json
from bson.objectid import ObjectId
class JSONEncoder(json.JSONEncoder):
def default(self, obj):
if isinstance(obj, ObjectId):
return str(obj)
return super().default(self, obj)
# Handler
async def post(self):
user = await self.db.user.find_one({})
self.write(JSONEncoder.encode(user))
这次不会再出错了,我们自己的 JSONEncoder
可以应对 ObjectId
了,但另一个问题也出现了:
JSONEncoder.encode
之后字典类型被转换成字符串,写入 HTTP 之后 Content-Type
变为text/html
,这时前端将认为接收的数据为字符串而不是可用的 JavaScript Object。当然还有进一步的弥补方案,那就是前端再进行一次转换:
$.post(API, {}, function(res){
data = JSON.parse(res);
console.log(data._id);
})
问题暂时解决了,在整个过程中 JSON 的变换是这样的:
Python ==> json.dumps ==> HTTP ==> JavaScript ==> JSON.parse
dict ==> str ==> binary ==> string ==> Object
结果第二个问题来了,当数据中存在一些特殊字符时,JSON.parse
将出现错误:
JSON.parse("{'abs': '\n'}");
// VM536:1 Uncaught SyntaxError: Unexpected token ' in JSON at position 1(…)
这就是在遇到问题是只着眼解决眼前错误导致后续一连串改动所带来的弊病。我们沿着上面 JSON 变换的链条向上追溯,看有没有更好的解决方案。很简单,遵循传统规则,出现特例的时候,改变自身适应规则,而不是改变规则:
# Handler
async def post(self):
user = await self.db.user.find_one({})
user['_id'] = str(user['_id'])
self.write(user)
当然,如果是多条数据的列表形式,还需要进一步改造:
# DB
async def get_top_users(self, n = 20):
users = []
async for user in self.db.user.find({}).sort('rank', -1).limit(n):
user['_id'] = str(user['_id'])
users.append(user)
return users
4. Python <=> HTML+Riot.js
如果上面的问题可以通过遵守规则来解决,那么接下来这个问题就是一个挑战规则的故事。除去 Ajax 动态加载部分,网页上的其他数据是通过后端模板引擎渲染得来的,也就是说是 Hard-coding 为 HTML 的。在浏览器加载并解析这个 HTML 文件之前它们只是纯文本文件,而我们需要的是直接将数据塞仅 <script>
标签在浏览器运行 JavaScript
时直接可用。严格意义上来说这并不算是 JSON 的应用,而是 Python 的 dict
与 JavaScript 的 Object
之间的直接转换,常规的方法应该这样写:
# Handler
async def get(self):
users = self.db.get_top_users()
render_data = dict(
users = users
)
self.render('users.html', **render_data)
<!-- HTML + Riot.js -->
<app></app>
<script>
riot.mount('app', {
users: [
{% for user in users %}
{ name: "{{ user['name']}}", is_admin: "{{ user['is_admin']}}" },
{% end %}
],
})
</script>
这样写是对的,但是要解决上面提到的 ObjectId()
问题还是需要一些额外的处理(尤其是引号问题)。另外为了解决 ObjectId
的问题我还尝试了一种比较蠢的方法(在上面的 JSON.parse
遇到错误之前):
# Handler
async def get(self):
users = self.db.get_top_users()
render_data = dict(
users = JSONEncoder.encode(users)
)
self.render('users.html', **render_data)
<!-- HTML + Riot.js -->
<app></app>
<script>
riot.mount('app', {
users: JSON.parse('{{ users }}'),
})
</script>
其实跟第 3 小节的问题一样,模板引擎渲染过程与 HTTP 传输过程是类似的,不同的是在模板中字符串变量就是纯粹的值(没有引号),因此完全可以用生成 JavaScript 脚本文件的形式渲染变量而无需顾虑特殊字符(下面的 {% raw ... %}
是 Tornado 模板用于防止特殊符号被 HTML 编码的语法):
<!-- HTML + Riot.js -->
<app></app>
<script>
riot.mount('app', {
users: {% raw users %}),
})
</script>
总结
JSON 是很好用的数据格式,但是在不同语言环境之间切换还是有很多细节问题需要注意。此外,遵循传统规则,出现特例的时候,改变自身适应规则,而不是试图改变规则,这一条不一定适应所有问题,但对于那些已被公认的规则,请勿轻易挑战。
JSON 的正确用法:Python、MongoDB、JavaScript与AjaxJSON 的正确用法:Python、MongoDB、JavaScript与Ajax的更多相关文章
- 浅谈Python在信息学竞赛中的运用及Python的基本用法
浅谈Python在信息学竞赛中的运用及Python的基本用法 前言 众所周知,Python是一种非常实用的语言.但是由于其运算时的低效和解释型编译,在信息学竞赛中并不用于完成算法程序.但正如LRJ在& ...
- MongoDB 安装详细教程 + 常用命令 + 与 Python 的交互
MongoDB 简介 MongoDB (名称来自 humongous/巨大无比的, 是一个可扩展的高性能,开源,模式自由,面向文档的NoSQL,基于 分布式 文件存储,由 C++ 语言编写,设计之初旨 ...
- Python爬虫进阶四之PySpider的用法
审时度势 PySpider 是一个我个人认为非常方便并且功能强大的爬虫框架,支持多线程爬取.JS动态解析,提供了可操作界面.出错重试.定时爬取等等的功能,使用非常人性化. 本篇内容通过跟我做一个好玩的 ...
- Python爬虫利器六之PyQuery的用法
前言 你是否觉得 XPath 的用法多少有点晦涩难记呢? 你是否觉得 BeautifulSoup 的语法多少有些悭吝难懂呢? 你是否甚至还在苦苦研究正则表达式却因为少些了一个点而抓狂呢? 你是否已经有 ...
- python中的 try...except...finally 的用法
python中的 try...except...finally 的用法 author:headsen chen date:2018-04-09 16:22:11 try, except, final ...
- 孤荷凌寒自学python第五十七天初次尝试使用python来连接远端MongoDb数据库
孤荷凌寒自学python第五十七天初次尝试使用python来连接远端MongoDb数据库 (完整学习过程屏幕记录视频地址在文末) 今天是学习mongoDB数据库的第三天.感觉这个东西学习起来还是那么困 ...
- 孤荷凌寒自学python第五十六天通过compass客户端和mongodb shell 命令来连接远端MongoDb数据库
孤荷凌寒自学python第五十六天通过compass客户端和mongodb shell 命令来连接远端MongoDb数据库 (完整学习过程屏幕记录视频地址在文末) 今天是学习mongoDB数据库的第二 ...
- PYTHON 爬虫笔记七:Selenium库基础用法
知识点一:Selenium库详解及其基本使用 什么是Selenium selenium 是一套完整的web应用程序测试系统,包含了测试的录制(selenium IDE),编写及运行(Selenium ...
- python浅学【网络服务中间件】之MongoDB
一.关于MongoDB: MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统. 在高负载的情况下,添加更多的节点,可以保证服务器性能. MongoDB 旨在为WEB应用提供 ...
随机推荐
- IPv4(三)地址掩码
回顾网络类型确定 回顾一下之前学过的如果确定IP地址网络号,这里先不考虑子网. 首先通过首个八位组字节规则很容易确定IP地址属于那个网络: 如果第1位是0,则是A类地址: 如果前两位是10,则是B类地 ...
- JavaScript系列问题
JavaScript系列问题: 0.javascript 基础教程[温故而知新一] 1.通过JS变更页面字体的大小 2.图片压缩优化能有效提高网站浏览速度
- tao.opengl+C#绘制三维模型
一.tao.Opengl技术简介 Opengl是一种C风格的图形库,即opengl中没有类和对象,只有大量的函数.Opengl在内部就是一个状态机,利用不同的函数来修改opengl状态机的状态,以达到 ...
- Linux NAT网络连接权威指南
[1]准备工作,写在前面 1.1)检查服务(cmd>>services.msc,我用的是VM) 1.2)确保Vmnet8 连接处于启动状态 + 获取ipv4(ipv6)地址 (在网络连接不 ...
- 【转】php和java之间rsa加密互通
以下是php封装好的类,引入即可使用 <?php /** * 作者:pjp * 邮箱:vippjp@163.com */ class RSA{ private $privateKey='';// ...
- Unity3D研究院之拓展Scene视图
Scene视图是编辑游戏模型的地方,其实它还可以进行编辑.如下图所示,我给Scene视图做了简单的编辑. Scene视图的拓展是基于对象的,意思就是你必须在Hierarchy视图中选择一个对象才行.H ...
- EntityFramework走马观花之CRUD(中)
如果是独立的实体对象,在底层数据库中它对应一张独立的表,那么,对它进行新建.删除和修改没有任何难度,实在不值浪费笔墨在它上头. 在现实项目中,完全独立的对象少之又少,绝大多数情况都是对象之间有着紧密的 ...
- iOS文档预览功能教程
本文转载至 http://blog.csdn.net/devday/article/details/6580444 文档iosuinavigationcontrollerextensionmic ...
- python 基础 5.1 python 构造器
一. 类的构造器 __init__ 构造函数,在生成对象时调用.由于类可以起到模板的作用,因此,可以在创建实例的时候,把一些我们认为必须绑定的属性强制填写进去.通过定义一个特殊的__init__方法, ...
- EasyPlayer_Android RTSP安卓播放器直播画面卡在第一帧问题修复
最近发现某些Android安卓手机在运行EasyPlayer播放视频时,会停留在第一帧画面,虽然有码率预示着接收端没有问题,但是画面却卡着不动. 一般来讲,这个现象有三种原因导致: 没有接收到视频帧; ...