django高级（五）使用ajax获取数据

最新推荐文章于 2024-10-17 21:47:10 发布

原创最新推荐文章于 2024-10-17 21:47:10 发布 · 2.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#ajax

前端专栏收录该内容

31 篇文章

订阅专栏

本文介绍如何在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框架中提供了 $. a j a x 、$ .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>

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