Django关联模型自动填充咨询：选邮编后自动填充用户城市字段

要实现选择邮编后自动填充城市到personcity字段，确实需要结合Django后端提供数据接口，再配合前端JS/AJAX完成触发请求与字段填充，具体步骤如下：

一、后端修改 #

1. 新增API视图（views.py） #

在views.py中添加一个专门处理AJAX请求的视图，根据邮编ID返回对应城市的JSON数据：

from django.http import JsonResponse
# ... 保留原有导入和视图代码 ...

def get_city_by_zip(request, zip_id):
    try:
        zip_obj = Zip.objects.get(pk=zip_id)
        return JsonResponse({'city': zip_obj.city})
    except Zip.DoesNotExist:
        return JsonResponse({'city': ''}, status=404)

2. 配置路由（urls.py） #

在应用的urls.py中添加该API的路由（若无urls.py则先创建）：

from django.urls import path
from . import views

urlpatterns = [
    # ... 保留原有路由配置 ...
    path('get-city/<int:zip_id>/', views.get_city_by_zip, name='get_city_by_zip'),
]

二、前端表单页面修改（person.html） #

修改用于创建Person的person.html模板，添加监听逻辑，触发AJAX请求并填充城市字段：

{% extends 'theapp/base/base.html' %}
{% load static %}

{% block title %}添加Person{% endblock %}

{% block body %}
<section>
    <h2>添加Person</h2>
    <form method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">保存</button>
    </form>
</section>

<!-- 引入jQuery，也可替换为原生JS实现 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    // 监听邮编选择框的变化事件
    $('#id_zipcode').change(function() {
        const zipId = $(this).val();
        const cityInput = $('#id_personcity');
        
        if (zipId) {
            // 发送AJAX请求到后端API
            $.ajax({
                url: `/get-city/${zipId}/`,
                type: 'GET',
                success: function(data) {
                    cityInput.val(data.city);
                },
                error: function() {
                    cityInput.val('');
                }
            });
        } else {
            cityInput.val('');
        }
    });
});
</script>
{% endblock %}

三、额外优化方案 #

• 避免前端验证问题：将Person模型的personcity字段设为非必填，防止未触发AJAX时表单验证失败：

  personcity = models.CharField(max_length=200, blank=True)
  

• 后端强制同步数据：在保存Person时，直接从关联的Zip对象中获取城市，避免前端数据被篡改：

  def person_new(request):
      if request.method == "POST":
          form = PersonForm(request.POST)
          if form.is_valid():
              post = form.save(commit=False)
              post.personcity = post.zipcode.city
              post.save()
              return redirect('person_detail', pk=post.pk)
      else:
          form = PersonForm()
      return render(request, 'theapp/person.html', {'form': form})
  

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