django高级(五)使用ajax获取数据

本文介绍如何在Django中使用Ajax获取数据,以省市区选择为例,讲解了Ajax的使用场景,包括jQuery的.ajax、.get、$.post方法。在Django中,由于csrf的限制,推荐使用$.get。文章详细阐述了模型类的创建、URL配置、视图函数以及模板的使用,展示了如何通过Ajax动态加载和展示数据。

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

如果模型类已经迁移过,现在要新定义一个模型类,再迁移是失败的。此时可以先用SQL语句创建一个表,然后再去创建一个模型类,一一对应即可。
SQL语句创建表:
在这里插入图片描述
模型类:

class AreaInfo(models.Model):
    title=models.CharField(max_length=20)
    parea=models.ForeignKey('self',null=True,blank=True)

模型类名AreaInfo,对应的表的名字booktest_areainfo

模型类中的外键parea,映射为SQL语句后,表中对应的是parea_id

使用视图通过模板向上下文传递数据,需要先解析url,通过视图加载模板的静态页面,然后再执行相应的模型代码,生成最终的html。返回给浏览器,这种方法将页面和数据集集中到了一起,扩展性差。现在通过ajax方式来获取数据,通过dom操作将数据呈现到页面上。

本文以省市区的选择为例,使用ajax来获取数据:

  • jquery框架中提供了.ajax、.ajax、.ajax.get、$.post方法,用于进行异步交互
  • 由于csrf的约束,推荐使用$.get
  • 省市区的选择:
    在这里插入图片描述
    引入js文件
    js文件属于静态文件,放在static文件下面:
    在这里插入图片描述

修改setting.py关于静态文件的设置

STATIC_URL = '/static/'
STATICFILES_DIRS=[
    os.path.join(BASE_DIR,'static')
]

在models.py中定义模型

class AreaInfo(models.Model):
    title=models.CharField(max_length=20)
    parea=models.ForeignKey('self',null=True,blank=True)

生成迁移
注意:如果之前已经迁移过,django不支持再次迁移,只能通过SQL语句创建一个对应的表。
如果之前没有迁移过,则生成迁移

python manage.py makemigrations
python manage.py migrate

url配置

url(r'^area/$',views.area), url(r'^area/(\d+)$',views.area2)

定义视图函数area

def area(request):
    return render(request,'booktest/area.html')

定义视图area2
获取数据库表格booktest_areainfo所有的数据,并通过ajax返回到模板中

def area2(request,id):
    id1=int(id)
    if id1==0:
        data=AreaInfo.objects.filter(parea__isnull=True)
    else:
        data=[{}]
    list=[]
    for area in data:
        list.append([area.id,area.title])
    return JsonResponse({'data':list})

调用模板area.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/booktest/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            pro=$('#pro')
            $.get('/area/0',function(dic){//{'dic':[[],[],[]]}
                $.each(dic.data,function(index,item){
                    pro.append('<option value="'+item[0]+'">'+item[1]+'</option>')
                })
            })
        });
    </script>
</head>
<body>
<select name="" id="pro">
    <option value="">请选择省</option>
</select>
<select name="" id="city">
    <option value="">请选择市</option>
</select>
<select name="" id="dis">
    <option value="">请选择区</option>
</select>
</body>
</html>

结果如下:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值