Django向JavaScript传递数据：示例与解析

146 浏览量更新于2024-08-31 收藏 88KB PDF 举报

本文主要探讨了Django框架与JavaScript（JS）如何进行交互，并提供了具体的示例代码。在Web开发中，有时我们需要将Django后台的数据传递给前端JS，以便进行进一步处理和显示。通常有两种常见的方式实现这种交互： 1. 页面加载完成后，通过AJAX异步请求获取数据。这种方式适用于页面不刷新的情况，如用户输入或点击事件触发时，动态更新网页内容。在Django中，可以在视图函数中准备数据，然后使用`json.dumps()`将其转换为JSON格式，以便于JS解析。例如： ```python from django.shortcuts import render from django.utils.safestring import mark_safe def home(request): list_data = ['自强学堂', '渲染Json到模板'] dict_data = {'site': '自强学堂', 'author': '涂伟忠'} return render(request, 'home.html', { 'List': mark_safe(json.dumps(list_data)), 'Dict': mark_safe(json.dumps(dict_data)), }) ``` 在HTML模板中，可以使用`{{ List|safe }}`和`{{ Dict|safe }}`来插入这些数据，同时使用`safe`过滤器确保Django不会尝试进行HTML转义。 ```html <!DOCTYPE html> <html> <head> <title>欢迎光临自强学堂！</title> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> </head> <body> <div id="list">{{ List|safe }}</div> <div id='dict'>{{ Dict|safe }}</div> <script type="text/javascript"> var list = JSON.parse(document.getElementById('list').innerHTML); // 对list进行进一步处理... var dict = JSON.parse(document.getElementById('dict').innerHTML); // 对dict进行进一步处理... </script> </body> </html> ``` 2. 直接在视图函数中渲染包含数据的HTML。这种方式适用于一次性渲染所有内容，无需额外请求。同样，需要将Django后台的数据转换为JSON格式，并在HTML模板中使用`safe`过滤器。这两种方法各有适用场景，第一种方法更灵活，可以实现动态更新，而第二种方法则更适合数据一次性加载的情况。无论哪种方式，确保Django和JS之间的数据交互安全且有效是至关重要的。在处理用户输入时，一定要注意防止XSS攻击，正确使用`json.dumps()`和`safe`过滤器可以降低这种风险。

Django与与JS交互的示例代码交互的示例代码

本篇文章主要介绍了Django与JS交互的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。

一起跟随小编过来看看吧

应用一：应用一：有时候我们想把一个 list 或者 dict 传递给 javascript，处理后显示到网页上，比如要用 js 进行可视化的数据。

请注意：如果是不处理，直接显示在网页上，用Django模板就可以了。

这里讲述两种方法：这里讲述两种方法：

一，页面加载完成后，在页面上操作，在页面上通过 ajax 方法得到新的数据（再向服务器发送一次请求）并显示在网页上，

这种情况适用于页面不刷新的情况下，动态加载一些内容。比如用户输入一个值或者点击某个地方，动态地把相应内容显示在

网页上。

二，直接在视图函数（views.py中的函数）中渲染一个 list 或 dict 的内容，和网页其它部分一起显示到网页上（一次性地渲

染，还是同一次请求）。

需要注意两点：1、views.py中返回的函数中的值要用 json.dumps()处理 2、在网页上要加一个 safe 过滤器

view.py

# -*- coding: utf-8 -*-

from __future__ import unicode_literals

import json

from django.shortcuts import render

def home(request):

List = ['自强学堂', '渲染Json到模板']

Dict = {'site': '自强学堂', 'author': '涂伟忠'}

return render(request, 'home.html', {

'List': json.dumps(List),

'Dict': json.dumps(Dict)

})

home.html

<!DOCTYPE html>

<html>

<head>

<title>欢迎光临自强学堂！</title>

</head>

<body>

//列表

var List = {{ List|safe }};

//下面的代码把List的每一部分放到头部和尾部

$('#list').prepend(List[0]);

$('#list').append(List[1]);

console.log('--- 遍历 List 方法 1 ---')

for(i in List){

console.log(i);// i为索引

}

console.log('--- 遍历 List 方法 2 ---')

for (var i = List.length - 1; i >= 0; i--) {

// 鼠标右键，审核元素，选择 console 可以看到输入的值。

console.log(List[i]);

};

console.log('--- 同时遍历索引和内容，使用 jQuery.each() 方法 ---')

$.each(List, function(index, item){

console.log(index);

console.log(item);

});

// 字典

var Dict = {{ Dict|safe }};

console.log("--- 两种字典的取值方式 ---")

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38696590

粉丝: 6

Django向JavaScript传递数据：示例与解析

【JavaScript源代码】django+vue实现注册登录的示例代码.docx

tutsplus的django示例代码

ajax_Django:Django的Ajax示例代码

django_tut:Django教程。 这段代码是Django官方文档教程示例（https

django字典与js交互.pdf

Django与Ajax的交互示例：无需数据库配置

Django与ReactJS集成示例项目发布

django js实现部分页面刷新的示例代码

Django Channel实时推送与聊天的示例代码

Django 创建/删除用户的示例代码

最新资源

django_tut:Django教程。这段代码是Django官方文档教程示例（https