如何序列化Django模型用于JS文件？获取指定条件实例

我来帮你搞定这个需求！要在JS里拿到Django Sounds模型中符合特定字段条件的数据，得前后端配合来做，分两步走：

先看你提供的原始代码 #

Django模型代码

class Sounds(models.Model):
    sound = models.TextField(max_length=500, blank=True)
    syl = models.TextField(max_length=500, blank=True)
    tone = models.IntegerField(blank=True, default=0)
    def as_json(self):
        return dict(
            input_id=self.id,
            sound=self.sound,
            syl=self.syl,
            tone=self.tone)

待完善的JS代码

function init() {
    -- 创建所有tone=1的实例列表 --
}

第一步：后端Django写API接口返回过滤后的数据 #

你需要先在Django里创建一个接口，用来接收前端的过滤条件，返回符合要求的Sounds实例数据。这里给你两种常用方案：

方案1：原生Django视图（无需额外依赖）

在你的app的views.py里添加以下代码：

from django.http import JsonResponse
from .models import Sounds

def get_filtered_sounds(request):
    # 从请求参数里获取要过滤的tone值，默认设为1
    target_tone = request.GET.get('tone', 1)
    # 过滤出符合条件的模型实例
    filtered_sounds = Sounds.objects.filter(tone=target_tone)
    # 用你已经写好的as_json方法把实例转成字典列表
    data = [sound.as_json() for sound in filtered_sounds]
    # 返回JSON格式响应
    return JsonResponse(data, safe=False)

然后在项目的urls.py里配置这个接口的路由：

from django.urls import path
from . import views

urlpatterns = [
    # 其他已有的路由...
    path('api/filtered-sounds/', views.get_filtered_sounds, name='filtered_sounds'),
]

方案2：用Django REST Framework（更专业的API方案）

如果你的项目已经在用DRF，或者需要更灵活的API功能，可以用这个方案：
首先创建serializers.py文件，写一个序列化器：

from rest_framework import serializers
from .models import Sounds

class SoundSerializer(serializers.ModelSerializer):
    class Meta:
        model = Sounds
        fields = ['id', 'sound', 'syl', 'tone']  # 指定要返回的字段

然后在views.py里写API视图：

from rest_framework.views import APIView
from rest_framework.response import Response
from .models import Sounds
from .serializers import SoundSerializer

class FilteredSoundsView(APIView):
    def get(self, request):
        target_tone = request.GET.get('tone', 1)
        sounds = Sounds.objects.filter(tone=target_tone)
        # 用序列化器把实例转成JSON格式
        serializer = SoundSerializer(sounds, many=True)
        return Response(serializer.data)

最后配置路由：

from django.urls import path
from . import views

urlpatterns = [
    # 其他已有的路由...
    path('api/filtered-sounds/', views.FilteredSoundsView.as_view(), name='filtered_sounds'),
]

第二步：前端JS请求API获取数据 #

修改你的init函数，用fetch API（现代浏览器默认支持）请求后端接口，拿到数据后处理：

function init() {
    // 可以自定义要过滤的tone值，比如从页面输入框获取，这里默认设为1
    const targetTone = 1;
    // 发送GET请求到后端API，传递tone参数
    fetch(`/api/filtered-sounds/?tone=${targetTone}`)
        .then(response => {
            // 检查响应是否成功
            if (!response.ok) {
                throw new Error('数据请求失败，请检查后端接口');
            }
            // 把响应转成JSON格式
            return response.json();
        })
        .then(data => {
            // data就是所有符合tone=targetTone的Sounds实例数组
            console.log('获取到的符合条件的数据：', data);
            // 这里可以添加你的业务逻辑，比如把数据渲染到页面上
            renderSoundList(data);
        })
        .catch(error => {
            // 捕获请求过程中的错误
            console.error('请求出错：', error);
        });
}

// 示例：把数据渲染到页面的函数
function renderSoundList(sounds) {
    const container = document.getElementById('sound-list-container');
    // 先清空容器
    container.innerHTML = '';
    sounds.forEach(sound => {
        const item = document.createElement('div');
        item.className = 'sound-item';
        item.innerHTML = `
            <p><strong>发音：</strong>${sound.sound}</p>
            <p><strong>音节：</strong>${sound.syl}</p>
            <p><strong>声调：</strong>${sound.tone}</p>
            <hr>
        `;
        container.appendChild(item);
    });
}

// 页面加载完成后自动执行init函数
document.addEventListener('DOMContentLoaded', init);

额外说明 #

• 如果要过滤其他字段（比如syl包含某个字符串），只需要修改后端视图里的filter条件，比如Sounds.objects.filter(syl__contains='abc')，同时前端请求时传递对应的参数即可。
• 如果你的JS和Django后端不在同一个域名下，需要解决跨域问题，可以用Django的django-cors-headers包来配置。

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