如何在 Javascript 中将 Django 对象作为参数发送？

Posted 2023-02-24

【中文标题】如何在 Javascript 中将 Django 对象作为参数发送？

【英文标题】：How do I send Django object as parameter in Javascript?

【发布时间】：2021-12-26 16:39:20

【问题描述】：

正如标题中提到的，我正在尝试将我的 Django 对象发送到 javascript，以便我可以在前端对其进行按摩。让我向您展示代码（简化）。 视图.py

def main_page(request):
    contents = Contents.objects.all()

    context = 
            'contents' : contents
        

    return render(request, 'main/home.html', context)

模板

    % for u in all_ans_us_paginated %
    <div class="row">
        <div class="col">
            <div class="" id="u.id" onclick="DetailModal('u')">
            </div>
        </div>
    </div>
    % endfor %

...

<script>
    function DetailModal(u) 
        console.log('u.author');
        console.log('u.body');
    
</script>

我的目的是在触发点击事件时显示一个模式。但是将模态部分放在一边，我无法将数据作为参数传递给 JavaScript。 *我不想对 python 代码做任何更改。是否可以仅使用 HTML 和 JavaScript 来实现？ **JSON.parse(u) 不起作用，因为u 是字符串。

【问题讨论】：

***.com/questions/15874233/…的可能重复

【参考方案1】：

在 DJANGO 中

from django.shortcuts import render
from json import dumps
def send_dictionary(request):
# create data dictionary
dataDictionary = 
    'hello': 'World',
    'geeks': 'forgeeks',
    'ABC': 123,
    456: 'abc',
    14000605: 1,
    'list': ['geeks', 4, 'geeks'],
    'dictionary': 'you': 'can', 'send': 'anything', 3: 1

# dump data
dataJSON = dumps(dataDictionary)
return render(request, 'main / app.js', 'data': dataJSON)

在 JAVASCRIPT 中

app.js 文件：

var data = JSON.parse("data|escapejs");
for(var x in data)
 // Write What You Want Here

如果您想要清晰的代码视图，请使用这种方式，因为 javaScript 将字典视为单独的对象

  dataDictionary = [
    ["Laugh", "Cry"],
    ["Even", "Odd"],
    ["Hot", "Cold"],
    ["Light", "Dark"],
    ["Opposite", "Same"],
    ["Far", "Near"],
    ["Give", "Take"],
    ["Night", "Day"],
    ["Import", "Export"],
    ["Hard", "Easy"],
    ["Never", "Always"],
    ["Late", "Early"],
    ["Less", "More"],
    ["Male", "Female"],
    ["Happiness", "Sadness"],
    ["Fast", "Slow"],
    ["Old", "Young"],
    ["Boy", "Girl"],
    ["Up", "Down"],
    ["Left", "Right"],
    ["Rich", "Poor"],
    ["Love", "Hate"],
    ["Inside", "Outside"],
    ["Bad", "Good"],
    ["Short", "Tall"],
   ]