django搭建城市联动，三级联动,ajax实现

最新推荐文章于 2025-03-19 21:37:02 发布

树欲静而风不止…

最新推荐文章于 2025-03-19 21:37:02 发布

阅读量845

点赞数

CC 4.0 BY-SA版权

分类专栏： python django web后端

本文链接：https://blog.youkuaiyun.com/Doraemon_meow_meow/article/details/90400409

python 同时被 3 个专栏收录

36 篇文章

订阅专栏

django

27 篇文章

订阅专栏

web后端

27 篇文章

订阅专栏

博客提及了citys.html、views.py和models.py。通常citys.html属于前端页面文件，views.py和models.py常用于后端开发，涉及业务逻辑和数据模型处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

citys.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>城市联动</title>
</head>
<body>
    <select>
        <option>--请选择--</option>
        {% for v in data %}
        <option value="{{ v.id }}">{{ v.name }}</option>
        {% endfor %}
    </select>

    <script type="text/javascript" src="/static/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">

        // 第一步 获取 选框,绑定change事件
        $('select').live('change',function(){
            // 获取当前选中的城市id
            var cid = $(this).val()
            // 删除当前元素之后的所有同级元素
            $(this).nextAll().remove()
            // 发送ajax
            $.get('{% url 'get_city' %}',{'cid':cid},function(data){
                // 判断当前是否还有数据
                if(data.length == 0){return;}
                // 动态创建 下拉选框
                var sel = $('<select></select>')
                // 定义选项
                var ops = '<option>--请选择--</option>'
                // [{},{},{}]
                for (var i = 0; i < data.length; i++) {
                    ops+= '<option value="'+data[i].id+'">'+data[i].name+'</option>'
                }
                // 把定义的选项设置到下拉框中
                sel.html(ops)
                // 把创建的html添加到页面中
                $('body').append(sel)
            },'json')
        })
    </script>

</body>
</html>

views.py


# 城市联动页面
from django.shortcuts import render,redirect
from django.http import HttpResponse,JsonResponse
from django.core.urlresolvers import reverse

from . models import Citys




def citys(request):
    
    # 从数据库中获取所有的一级城市信息
    data = Citys.objects.filter(upid=0)

    # 分配数据
    context = {'data':data}
    # 加载模板
    return render(request,'citys.html',context)

# 获取 城市信息 
def get_city(request):
    # 获取请求的参数
    cid = request.GET.get('cid')
	'''
		根据请求的参数,查询对应的城市数据，values()获取出所有对象中的值，
		获取出来是个查询集对象，需要强转换成list，
	'''
    data = list(Citys.objects.filter(upid=cid).values())
    # select * from citys where upid=15;
    
    # 返回json数据 {} [{},{}]
    return JsonResponse(data,safe=False)

models.py

from django.db import models



# 城市数据
class Citys(models.Model):
    '''
    # id    name level upid
        1   北京   1     0
        2   昌平区  2    1
        3   沙河镇   3   2
    '''
    name = models.CharField(max_length=255)
    level = models.IntegerField()
    upid = models.IntegerField()

    class Meta:
        db_table = 'citys'