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

如果模型类已经迁移过，现在要新定义一个模型类，再迁移是失败的。此时可以先用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、$ .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返回到模板中

扫描二维码关注公众号，回复： 6049211 查看本文章

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>

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

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

猜你喜欢