如何通过Ajax获取Django中的Python变量并填充下拉菜单

1. 先准备Django后端JSON接口 #

你需要先提供一个返回书籍列表的接口，给前端Ajax调用：

views.py 新增视图 #

from django.http import JsonResponse
from .models import Book # 按你实际的模型调整导入

def get_booklist(request):
    booklist = []
    # 按业务逻辑组装书籍列表，格式示例：[{"name": "书名1", "id": 1}, {"name": "书名2", "id": 2}]
    for book in Book.objects.all():
        booklist.append({
            "id": book.id,
            "name": book.name
            # 可自行补充其他需要返回的字段
        })
    return JsonResponse(booklist, safe=False)

urls.py 配置路由 #

urlpatterns = [
    # 保留原有其他路由
    path('api/books/', get_booklist, name='get_books'),
]

2. 原有JS代码的问题 #

• 没有发起Ajax请求拉取后端数据，直接使用的booklist变量在前端环境不存在
• 使用for...in遍历数组会拿到索引值而非书籍对象，无法正确读取name属性
• 拼接option标签时value=book是硬编码字符串，没有插入实际的书籍值

3. 正确前端Ajax实现 #

$(document).ready(function() {
    // 调用后端接口拉取数据
    $.ajax({
        url: '/api/books/',
        type: 'get',
        dataType: 'json',
        success: function(booklist) {
            const $select = $('#booklist');
            // 清空原有内容，保留默认提示项
            $select.html('<option value="">请选择一本书</option>');
            // 遍历书籍列表生成选项
            booklist.forEach(book => {
                // 按实际需要设置value的值，比如可替换为book.id
                $select.append(`<option value="${book}">${book.name}</option>`);
            })
        },
        error: function() {
            console.log('书籍列表加载失败')
        }
    })
})

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