如何结合Django json_script标签安全嵌入驼峰式序列化数据？

方案一：利用现有驼峰序列化工具（推荐） #

既然你已经在AJAX请求中使用了Django Camel Case，直接让序列化器继承对应的驼峰序列化基类，就能让serializer.data直接生成驼峰键名的数据，再配合json_script标签即可安全输出。

修改你的serializers.py：

from rest_framework import serializers
from rest_framework_camel_case.serializers import CamelCaseModelSerializer

class FooSerializer(CamelCaseModelSerializer):
    class Meta:
        model = Foo
        fields = ('id', 'last_name')

视图和模板无需额外修改，{{ serializer.data|json_script:"FOO_DATA" }}输出的JSON键会自动变成lastName，同时保留json_script自带的HTML安全转义特性。

方案二：自定义驼峰转换函数（无依赖） #

如果不想依赖第三方序列化工具，可以在视图层手动将serializer.data的键名转为驼峰格式，再传入模板使用json_script。

1. 在views.py中添加转换函数：

from django.views import generic
from . import models, serializers

def snake_to_camel(snake_str):
    """将snake_case字符串转为camelCase"""
    parts = snake_str.split('_')
    return parts[0] + ''.join(part.capitalize() for part in parts[1:])

def convert_to_camel_case(data):
    """递归处理嵌套结构，将所有键转为camelCase"""
    if isinstance(data, list):
        return [convert_to_camel_case(item) for item in data]
    elif isinstance(data, dict):
        return {snake_to_camel(key): convert_to_camel_case(value) for key, value in data.items()}
    else:
        return data

class IndexView(generic.ListView):
    template_name = f"myapp/index.html"
    model = Foo

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        serializer = serializers.FooSerializer(self.object_list, many=True)
        # 将序列化后的数据转为驼峰格式
        context['camel_case_foos'] = convert_to_camel_case(serializer.data)
        return context

2. 修改模板代码：

{{ camel_case_foos|json_script:"FOO_DATA" }}
<script type="module">
    const foos = JSON.parse(document.getElementById('FOO_DATA').textContent);
    console.log(foos)
</script>

这个方案完全自定义，不依赖任何第三方包，同时json_script的安全转义逻辑不受影响，能确保嵌入的JSON在HTML中不会出现XSS风险。

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