如何在 django 模板中接收上下文数据并在 javascript 中使用它答案

【问题标题】：How to receive context data in django template and work with it in javascript如何在 django 模板中接收上下文数据并在 javascript 中使用它
【发布时间】：2021-06-23 14:01:33
【问题描述】：

我正在尝试在 django 模板中接收上下文数据并在 javascript 中使用它。目前我正在接收数据，但作为一个字符串，它看起来很乱。

我的代码：

{% extends "base.html" %}

{% block content %}
    {% if search_list %}
        <!-- do something -->
    {% endif %}

    <!-- javascript code  -->

    {% block script %}
    <script >
        let data = '{{search_list}}'
        
        console.log(data);
        
    </script>
    {% endblock script %}
   

{% endblock %}

和views.py

from django.shortcuts import render
from .models import search_history


def index(request):
    search_list = search_history.objects.order_by('-query_date')[:10]
    context = {'search_list': search_list}
    return render(request, 'search_history/index.html', context)

如果我在 javascript 中删除变量 search_list 中的引号，则会显示错误。我使用了jsonify 和safe 标签它不起作用。我如何在这里获取数据作为对象？

【问题讨论】：

这是一个模板，{{search_list}} 将在生成 html 时进行评估。因此，里面的一切都只能是静态文本/字符串。如果您想要对象 - 以解析 AJAX 请求响应的方式解析它。例如JSON.parse()
没有receive 有占位符替换。
@IvanStarostin 我尝试将数据解析为 JSON，但它不起作用。在上面的代码中，let data = '{{search_list}}' 行在控制台中记录了类似的内容：&lt;QuerySet [&lt;search_history: whats the meaning of life&gt;, &lt;search_history: how to search
@IvanStarostin {{search_list}} 没有引号会给出这个错误 - Uncaught SyntaxError: Unexpected token '&'
添加您的查看代码。

标签： javascript django django-templates

【解决方案1】：

以 JSON 格式返回数据

import json

def index(request):
    search_list = search_history.objects.order_by('-query_date')[:10]
    context = {'search_list': json.dumps(search_list)}
    return render(request, 'search_history/index.html', context)

在js中获取

let data = JSON.parse("{{ search_list | escapejs }}");

或

let data = {{ search_list | safe }};

并考虑将这一切变成更优雅的方式：

ajax 请求
json 响应

但是发出 ajax 请求有点复杂，需要手动发送 csrf 等等，但您不必在最终的 html 中渲染大常量 json 值。

json 响应的视图和原始视图如下所示：

def index(request):
    return render(request, 'search_history/index.html')

def get_search_list(request):
    search_list = search_history.objects.order_by('-query_date')[:10]
    return JsonResponse({'search_list': search_list})

【讨论】：