Django中如何用JavaScript/Ajax根据选中车辆ID自动填充表单

给你两种实用方案，替换你原来的模拟数据，直接从数据库取真实值：

方法一：提前渲染数据到前端（适合车辆数量少的场景） #

1. 后端视图整理数据 #

先在视图里把所有车辆和对应的目标公里数（默认取该车辆最近一次加油记录的progressive_km作为本次的previous_km，按需调整逻辑）查出来：

from django.shortcuts import render
from .models import Vehicle, Fuel
import json

def fuel_add(request):
    # 获取所有车辆
    vehicles = Vehicle.objects.all()
    # 整理每个车辆的ID和对应的上次公里数
    vehicle_data = []
    for car in vehicles:
        # 查找该车辆最新的加油记录（按ID倒序取第一条）
        latest_refuel = Fuel.objects.filter(vehicle=car).order_by('-id').first()
        # 无记录时设默认值0，否则用最新总里程作为本次的上次公里数
        prev_km = latest_refuel.progressive_km if latest_refuel else 0
        vehicle_data.append({'id': car.id, 'previous_km': prev_km})
    # 转成JSON格式传给模板，避免JS报错
    vehicle_data_json = json.dumps(vehicle_data)
    return render(request, 'your_template.html', {'vehicles': vehicles, 'vehicle_data': vehicle_data_json})

2. 模板中替换JS数据 #

把原来的模拟usersData换成后端传的真实数据，逻辑和你原来的代码基本一致：

<!-- 车辆下拉框，替换成你Vehicle模型实际的显示字段，比如车牌plate_number -->
<select id="vehicle" name="vehicle">
    {% for car in vehicles %}
        <option value="{{ car.id }}">{{ car.name }}</option>
    {% endfor %}
</select>

<!-- 自动填充的上次公里数输入框 -->
<input type="number" id="previous_km" name="previous_km">

<script>
// 将后端传递的JSON转成JS数组
let vehicleData = JSON.parse('{{ vehicle_data|escapejs }}');

// 监听下拉框选择事件
document.getElementById('vehicle').onchange = (e) => {
    let selectedCar = vehicleData.find(car => car.id == e.target.value);
    if (selectedCar) {
        document.getElementById('previous_km').value = selectedCar.previous_km;
    } else {
        // 无匹配数据时设默认值
        document.getElementById('previous_km').value = 0;
    }
};
</script>

方法二：AJAX实时请求（适合车辆数量多的场景） #

如果车辆太多，提前渲染所有数据会增加页面体积，就用这种选完车再异步查数据的方式：

1. 后端添加接口 #

先写一个返回车辆公里数的视图，再配置路由：

views.py 添加视图函数

from django.http import JsonResponse
from .models import Fuel

def get_car_prev_km(request, car_id):
    try:
        # 查找对应车辆最新的加油记录
        latest_refuel = Fuel.objects.filter(vehicle_id=car_id).order_by('-id').first()
        prev_km = latest_refuel.progressive_km if latest_refuel else 0
        return JsonResponse({'previous_km': prev_km})
    except Exception as e:
        return JsonResponse({'previous_km': 0}, status=400)

urls.py 添加路由

from django.urls import path
from . import views

urlpatterns = [
    # 你的其他路由
    path('car/<int:car_id>/prev-km/', views.get_car_prev_km, name='car_prev_km'),
]

2. 前端用AJAX请求数据 #

修改JS逻辑，换成异步请求接口的形式：

<select id="vehicle" name="vehicle">
    {% for car in vehicles %}
        <option value="{{ car.id }}">{{ car.name }}</option>
    {% endfor %}
</select>

<input type="number" id="previous_km" name="previous_km">

<script>
document.getElementById('vehicle').onchange = async (e) => {
    const carId = e.target.value;
    if (!carId) return;
    try {
        // 请求后端接口获取数据
        const res = await fetch(`/car/${carId}/prev-km/`);
        const data = await res.json();
        document.getElementById('previous_km').value = data.previous_km;
    } catch (err) {
        console.log('获取数据失败:', err);
        document.getElementById('previous_km').value = 0;
    }
};
</script>

注意事项 #

• 若不需要取最新加油记录的里程，直接修改查询逻辑即可，比如取Vehicle模型本身的字段。
• escapejs过滤器必须加，避免JSON中的特殊字符导致JS语法错误。
• 下拉框的显示字段（如car.name）替换成你Vehicle模型实际存在的字段，比如plate_number（车牌）。

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