在Django 2.0.2的views.py中创建JSON对象并传递至HTML页面

先聊当前实现的合理性 #

你的代码是能跑通的，但算不上最优雅——它确实完成了把酒店名称映射到'null'的JSON对象传递到模板的需求，但循环构建字典的方式有点啰嗦，而且直接传递JSON字符串到模板时，如果前端JS处理，可能会遇到转义坑（比如酒店名称里带引号的话，虽然json.dumps会处理，但直接在模板输出时要确保渲染正确）。

优化方案一：用字典推导式简化JSON对象创建 #

把循环构建字典的部分换成字典推导式，一行搞定，代码更简洁高效；另外咱们还可以用Django更推荐的render函数替代手动加载模板的写法：

def hotels(request):
    list_of_hotels = Hotel.objects.order_by('hotel_name')
    # 字典推导式替代for循环，简洁不少
    data = {str(hotel.hotel_name): 'null' for hotel in list_of_hotels}
    json_data = json.dumps(data)
    context = {
        'list_of_hotels': list_of_hotels,
        'json_data': json_data,
    }
    # 用render函数一步到位，替代loader+HttpResponse的组合
    return render(request, 'myapp/hotels.html', context)

优化方案二：用Django的json_script标签规避转义风险 #

如果你的JSON是给前端JS用的，直接传字符串然后在模板输出可能有XSS风险或者转义错误。Django自带的json_script模板标签能安全地把Python对象转成JS可读取的JSON，推荐用这个：

1. 视图层修改：不用提前json.dumps，直接传Python字典就行：

def hotels(request):
    list_of_hotels = Hotel.objects.order_by('hotel_name')
    data = {str(hotel.hotel_name): 'null' for hotel in list_of_hotels}
    context = {
        'list_of_hotels': list_of_hotels,
        'hotel_data': data,  # 直接传Python字典，不用提前转JSON
    }
    return render(request, 'myapp/hotels.html', context)

2. 模板层修改：用json_script输出，再用JS读取：

{% load static %}
<div class="row">
    <div class="col s12">
        <div class="row">
            <div class="input-field col ...">
                <!-- 用json_script标签输出，指定id方便JS获取 -->
                {{ hotel_data|json_script:"hotel-data" }}
            </div>
        </div>
    </div>
</div>

<!-- 前端JS读取JSON -->
<script>
const hotelData = JSON.parse(document.getElementById('hotel-data').textContent);
console.log(hotelData);
</script>

这种方式Django会自动处理转义，避免XSS漏洞，而且不用手动调用json.dumps，代码更省心。

小提醒：如果要表示JSON的null，别用字符串'null' #

如果你的本意是在JSON里表示null（不是字符串"null"），那应该把字典里的值设为Python的None，json.dumps会自动把None转成JSON的null，更符合JSON规范：

data = {str(hotel.hotel_name): None for hotel in list_of_hotels}

内容的提问来源于stack exchange，提问作者Koishore Roy