Django、Flask 与 Javascirpt 之间传值与数据转换

本文介绍: 本文介绍了，在python 中 dict, json类型定义与区别，转换方法，在javascript 中 object与json 类型定义与区别、转换方法。 Django, Flask 传递数据库记录时常用的格式，以及在javascript 中如何通过json转为对象数组，通过遍历方法来解析所获取的数据。

Django 、Flask从数据库读出的数据通常保存为：对象列表、字典列表，或 tuple列表形式

# 用object_list 对象列表表示数据库记录
[
	<Article: id=1,title=星际穿越影评,body=作为一部硬科幻电影，..., ck=False>, 
	<Article: id=2,title=流浪地球,body=《流浪地 球》该部影片..., ck=False>, 
	<Article: id=3,title=海的尽头是草原,body=无论处在多么艰难的时..., ck=False>, 
	<Article: id=4,title=我们的岁月,body=想看看时代的缩影，结..., ck=False>
]
# 用 字典列表来表示数据库记录
[
	{'id': 1, 'title': '星际穿越影评', 'ck': False}, 
	{'id': 2, 'title': '流浪地球', 'ck': False}, 
	{'id': 3, 'title': '海的 尽头是草原', 'ck': False}, 
	{'id': 4, 'title': '我们的岁月', 'ck': False}
]
# 以tuple 列表，或二维列表，表示数据库记录
[
	(1, '星际穿越影评', False), 
	(2, '流浪地球', False), 
	(3, '海的尽头是草原', False), 
	(4, '我们的岁月', False), 
]

有时，我们需要使用Javascript的功能，比如使用 echarts 库进行绘图, 或者为了减轻服务器压力只返回原始数据给浏览器，在本地通过 assembly 或javascript 进行数据处理，等场景下，在javascript 端需要对收到的数据转换为javascript 易于处理的格式。

本文将介绍Django/Flask 数据库Web应用中后端传值，以及前端javascript处理的最佳实践：

在这里插入图片描述

什么是 json ？
json的定义javascript object notation, 是javascript 用以文本格式进行网络交换数据、或存储数据的格式。

什么是dict?
dict字曲类型是python 原生类型，主要用于in-memory 的数据描述，不能直接用于存储或网络数据交换。

x_dict = {
    "name": "John",
    "age": 30,
    "city": "New York"
}
y_json = json.dumps(x_dict)

y_json = '{"name":"John", "age":30, "city":"New York"}'
# 注意 key必须用"双引号“括起来，外面再用单引号括起来
x_dict = json.loads(y_json)

var  x = new Object;
x.name = "John"
x.age = 20
console.log(x)

{ name: 'John', age: 20 }

const jsonText = `{
    "browsers": {
      "firefox": {
        "name": "Firefox",
        "pref_url": "about:config",
        "releases": {
          "1": {
            "release_date": "2004-11-09",
            "status": "retired",
            "engine": "Gecko",
            "engine_version": "1.7"
          }
        }
      }
    }
  }`;

  console.log(JSON.parse(jsonText));

{
  browsers: {
    firefox: { name: 'Firefox', pref_url: 'about:config', releases: [Object] }
  }
}

  // parse method
  const x_json = '{"name":"John", "age":30, "city":"New York"}'
  const y_obj = JSON.parse(x_json)
  console.log(x_json)
  console.log(y_obj)

{"name":"John", "age":30, "city":"New York"}
{ name: 'John', age: 30, city: 'New York' }

  var z_obj = { x: 10, y: 100}
  var q_json=JSON.stringify(z_obj)

  console.log(z_obj)
  console.log(q_json)

{ x: 10, y: 100 }
{"x":10,"y":100}

q_json  = JSON.stringify([new Number(3), new String('false'), new Boolean(false)]),
console.log(q_json);
z_obj = JSON.parse(q_json)
console.log(typeof(z_obj),Object.keys(z_obj))

{ x: 10, y: 100 }
{"x":10,"y":100}
[3,"false",false]
object [ '0', '1', '2' ]

## views.py 
from django.shortcuts import render 
from json import dumps 
   
def send_dictionary(request):
    # create data dictionary
    dataDictionary = [{'id': 1, 'title': '星际穿越影评', 'ck': False}, {'id': 2, 'title': '流浪地球', 'ck': False}, {'id': 3, 'title': '海的 尽头是草原', 'ck': False}, {'id': 4, 'title': '我们的岁月', 'ck': False}, {'id': 6, 'title': 'Title_Test_a002', 'ck': False}, {
        'id': 7, 'title': 'Title_Test_a003', 'ck': False}, {'id': 8, 'title': 'Title_Test_a004', 'ck': False}, {'id': 9, 'title': 'A005', 'ck': False}, {'id': 10, 'title': 'A006', 'ck': False}, {'id': 11, 'title': 'A009', 'ck': False}, {'id': 12, 'title': 'A0010', 'ck': False}]

    # dump data to json string
    dataJSON = dumps(dataDictionary)
    # pass json data to template
    return render(request, 'main / landing.html', {'data': dataJSON})

<!-- templates.html 文件 -->
<!-- 以上省略  --> 
<script> 
	// convert json ⇒> object ， 第1层为数组
    var data = JSON.parse("{{data|escapejs}}"); 
	for (var i=0; i < data.length; i++){
	  let txt = Object.values(data[i]).join(",")
	  console.log(txt)
	}
</script>

1,星际穿越影评,false
2,流浪地球,false
3,海的 尽头是草原,false
4,我们的岁月,false
6,Title_Test_a002,false
7,Title_Test_a003,false
8,Title_Test_a004,false
9,A005,false
10,A006,false
11,A009,false
12,A0010,false