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、.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>

结果如下：

django高级（五）使用ajax获取数据相关推荐

vue定时ajax获取数据,vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: new Vue({ el:'#app', data:{data:&qu ...
ajax 微信code获取_获取链接的参数，判断是否是微信打开，ajax获取数据
//获取链接参数 function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "= ...
ajax获取数据中文乱码问题最简单的完美解决方案
ajax获取数据中文乱码问题最简单的完美解决方案参考文章: (1)ajax获取数据中文乱码问题最简单的完美解决方案 (2)https://www.cnblogs.com/konglxblog/p/1 ...
vue 读取ajax数据,详解vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: new Vue({ el:'#app', data:{data:&qu ...
(vue)在ajax获取数据时使用loading组件不起作用
问题描述: 在用ajax获取数据时页面没有变化,想用一个loading图标在获取数据时显示,获取完成后隐藏整个系统用到了vue框架,在执行sure方法时调用ajax函数 sure() {conso ...
Chart.js使用及ajax获取数据
图表插件Chart.js使用插件简介安装插件简介 chart.js是一个优秀的开源图表处理插件,内置条形,折现,雷达,时间刻度等等图表渲染. 安装 chart.js官网. 我这里使用2019年3 ...
【四二学堂】jquery方式ajax获取数据并渲染页面
var newsData = ''; var mydata = {"pageNum":obj.curr,"pageSize":"5"}; / ...
jQuery中ajax获取数据赋值给页面
//html代码 <a href="javascript:void(0)" class="cityname" id="{$rr[code]}&q ...
select2 ajax获取数据设置默认值,初始值
select2是一个非常好用的select美化插件,但是在最近使用时发现,select2在使用ajax获取数据内容时设置默认值非常麻烦,官方给出了一个解决方案就是添加一个属性selected的opti ...
自己做一个table插件 (一)Ajax获取数据后动态生成table
今天我给大家带来一个简单的JQ插件,Ajax获取数据后动态生成table.当然,有这种功能的插件有很多.著名的有DataTable.JqGrid--它们虽然功能丰富,成熟,拿来做二次开发是一个不错的选 ...

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

django高级（五）使用ajax获取数据相关推荐

最新文章

热门文章