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

2024-01-25 09:12
文章标签 java 数据 django 转换 传值 之间 flask scirpt

本文主要是介绍Django、Flask 与 Javascirpt 之间传值与数据转换，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

常见问题：JavaScript 如何处理Django、Flask传递的数据库数据

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处理的最佳实践：

  • Django/Flask 应该以什么格式传递数据库记录数据
  • 在前端 Javascript 中如何接收以及转换数据

在这里插入图片描述

1、区分python中dict与json, js中 object与json区别，以及转换

1.1 python中dict与json区别

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

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

二者区别

  • 在python中， json 类型是str, 虽然也是用 { key:value } 形式，但”key“必须是双引号，value可以是任意数据类型。integer, str, list, array 等。
  • dict 类型，dict是原生类型，不是字符串. 形式上也是key: value，但key可以双引号，也可用单引号括起来。
  • json格式可以直接写入文件、通过网络接口传递，而dict类型不能直接写入文件，必须转为json或 str,才可以。

dict 与json转换
dict => json :

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

json => dict

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

1.2 javascript 中，json与object的区别

什么是object?
object 是 javascript 的原生类型，也是所有类型的原始类型，但同样也不能直接用于网络传输数据。 形式上，key不能用引号括起来。

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

ouput

{ name: 'John', age: 20 }

json in javascript
json 在javascript中，形式上也是string类型，但 key必须用双引号括起来 “key”, 因此json字符串外层只能用单引号括起来

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

output

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

二者区别
形式上，

  • json 字符串外层用单引号括起来， “key” 用双引号，value为任意类型. vlue与冒号:之间无空格
  • object 外层无引号， key也不用括起来， value与冒号;之间有空格。

json与object转换

json => object: 用JSON.parse()方法

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

ouput:

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

注意 object r value 与: 之间有空格。

object => json ： 用JSON.stringify()

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

output

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

Object 的key可以省略， 就类似于python 列表， 所以django可以直接将列表传为json传值

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

output

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

2. Django/Flask传值给 javascript 的处理

2.1 django 传值给用户浏览器

由于dict不能直接用于网络间数据交换，因此django 须先将字典转换成 json 格式。
由于object 对象也不能直接用于网络接口，必须经序列化，但这样做的话，在javascript侧解析就比较麻烦。建议将数据库记录使用字典列表的格式，再转为json字符串，发送给模板，或直接用 HttpResponse返还给用户浏览器。

2.2 django传值给模板

视图传值给模板文件，实际上还是django内部流程, 所以可以直接用字典、字典列表传值，模板子系统{{{ x_dict }} 收到后，也是会转为html数据后才发送出去。 这种方式，模板中没有使用javascript 时，可以这样做。
Flask使用Jinjia2模板，处理是相同的。

2.3 django传值给模板 javascript

如果模板中包含了 javascript 代码，并需要对视图传递的数据进行处理，则视图不应该直接传递字典、字典列表，应先将字典列表数据转为json, 再传递给模板，如下例， 传递了书籍列表数据给模板

## views.py 
from django.shortcuts import render 
from json import dumps def send_dictionary(request):# create data dictionarydataDictionary = [{'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 stringdataJSON = dumps(dataDictionary)# pass json data to templatereturn render(request, 'main / landing.html', {'data': dataJSON})

javascript {{ x_json | safe }} 接收后，再用 JSON.parse()转换为object对象后处理。

<!-- 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>

output like

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

说明：

  • 在django侧的原始数据，是常用的字典列表，将其转为json后传给template中的javascript.
  • 在javascript 代码部分，用 {{ data | escapejs}} 获取json数据，然后用parse() 很方便地将数据转为 object元素构成的数组，
  • 用for循环遍历数组，每个objet元素，将其所有属性值拉出来，拼接成字符串显示出来。

这篇关于Django、Flask 与 Javascirpt 之间传值与数据转换的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/642800。

相关文章

Java实现检查多个时间段是否有重合

Java实现检查多个时间段是否有重合

《Java实现检查多个时间段是否有重合》这篇文章主要为大家详细介绍了如何使用Java实现检查多个时间段是否有重合,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录流程概述步骤详解China编程步骤1：定义时间段类步骤2：添加时间段步骤3：检查时间段是否有重合步骤4：输出结果示例代码结语作
阅读更多...
Java中String字符串使用避坑指南

Java中String字符串使用避坑指南

《Java中String字符串使用避坑指南》Java中的String字符串是我们日常编程中用得最多的类之一,看似简单的String使用,却隐藏着不少“坑”,如果不注意,可能会导致性能问题、意外的错误容... 目录8个避坑点如下：1. 字符串的不可变性：每次修改都创建新对象2. 使用 == 比较字符串，陷阱满
阅读更多...
Java判断多个时间段是否重合的方法小结

Java判断多个时间段是否重合的方法小结

《Java判断多个时间段是否重合的方法小结》这篇文章主要为大家详细介绍了Java中判断多个时间段是否重合的方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录判断多个时间段是否有间隔判断时间段集合是否与某时间段重合判断多个时间段是否有间隔实体类内容public class D
阅读更多...
IDEA编译报错“java: 常量字符串过长”的原因及解决方法

IDEA编译报错“java: 常量字符串过长”的原因及解决方法

《IDEA编译报错“java:常量字符串过长”的原因及解决方法》今天在开发过程中,由于尝试将一个文件的Base64字符串设置为常量,结果导致IDEA编译的时候出现了如下报错java:常量字符串过长,... 目录一、问题描述二、问题原因2.1 理论角度2.2 源码角度三、解决方案解决方案①：StringBui
阅读更多...
Java覆盖第三方jar包中的某一个类的实现方法

Java覆盖第三方jar包中的某一个类的实现方法

《Java覆盖第三方jar包中的某一个类的实现方法》在我们日常的开发中,经常需要使用第三方的jar包,有时候我们会发现第三方的jar包中的某一个类有问题,或者我们需要定制化修改其中的逻辑,那么应该如何... 目录一、需求描述二、示例描述三、操作步骤四、验证结果五、实现原理一、需求描述需求描述如下：需要在
阅读更多...
Java中ArrayList和LinkedList有什么区别举例详解

Java中ArrayList和LinkedList有什么区别举例详解

《Java中ArrayList和LinkedList有什么区别举例详解》：本文主要介绍Java中ArrayList和LinkedList区别的相关资料,包括数据结构特性、核心操作性能、内存与GC影... 目录一、底层数据结构二、核心操作性能对比三、内存与 GC 影响四、扩容机制五、线程安全与并发方案六、工程
阅读更多...
JavaScript中的reduce方法执行过程、使用场景及进阶用法

JavaScript中的reduce方法执行过程、使用场景及进阶用法

《JavaScript中的reduce方法执行过程、使用场景及进阶用法》：本文主要介绍JavaScript中的reduce方法执行过程、使用场景及进阶用法的相关资料,reduce是JavaScri... 目录1. 什么是reduce2. reduce语法2.1 语法2.2 参数说明3. reduce执行过程
阅读更多...
如何使用Java实现请求deepseek

如何使用Java实现请求deepseek

《如何使用Java实现请求deepseek》这篇文章主要为大家详细介绍了如何使用Java实现请求deepseek功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1.deepseek的api创建2.Java实现请求deepseek2.1 pom文件2.2 json转化文件2.2
阅读更多...
Java调用DeepSeek API的最佳实践及详细代码示例

Java调用DeepSeek API的最佳实践及详细代码示例

《Java调用DeepSeekAPI的最佳实践及详细代码示例》：本文主要介绍如何使用Java调用DeepSeekAPI,包括获取API密钥、添加HTTP客户端依赖、创建HTTP请求、处理响应、... 目录1. 获取API密钥2. 添加HTTP客户端依赖3. 创建HTTP请求4. 处理响应5. 错误处理6.
阅读更多...
Spring AI集成DeepSeek的详细步骤

Spring AI集成DeepSeek的详细步骤

《SpringAI集成DeepSeek的详细步骤》DeepSeek作为一款卓越的国产AI模型,越来越多的公司考虑在自己的应用中集成,对于Java应用来说,我们可以借助SpringAI集成DeepSe... 目录DeepSeek 介绍Spring AI 是什么？1、环境准备2、构建项目2.1、pom依赖2.2
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2