请选择 进入手机版 | 继续访问电脑版
查看: 331|回复: 0

[JavaScript] Django中使用jquery的ajax进行数据交互的实例代码方法

[复制链接]

911

主题

911

帖子

2783

积分

版主

Rank: 7Rank: 7Rank: 7

积分
2783
发表于 2017-11-27 19:36:03 | 显示全部楼层 |阅读模式

jquery框架中提供了$.ajax、$.get、$.post方法,用于进行异步交互,由于Django中默认使用CSRF约束,推荐使用$.get
示例:实现省市区的选择
最终实现效果如图:
将jquery文件拷贝到static/js/目录下

打开booktest/views.py文件,定义视图area1,用于显示下拉列表
?
1
2
3
#提供显示下拉列表的控件,供用户操作
def area1(request):
return render(request,'booktest/area1.html')




打开booktest/urls.py文件,配置url
?
1
url('^area1/$',views.area1),




在templates/booktest/目录下创建area1.html

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/js/jquery-1.12.4.min.js"></script>
<script>
  $(function () {
   $.get('/sheng/',function (data) {//{slist:[]}
    var slist=data.slist;//[{},{},{}...]
    var sheng=$('#sheng');
    $.each(slist,function (i,n) {
     //n==>{id:,title:}
     sheng.append('<option value="'+n.id+'">'+n.title+'</option>')
    });
   });
  
   $('#sheng').change(function () {
    var sid=$(this).val();
    if(sid!='0'){
     $.get('/shi/',{'sid':sid},function (data) {
      var slist=data.slist;
      var shi=$('#shi').empty().append('<option value="0">请选择</option>');
      $('#qu').empty().append('<option value="0">请选择</option>');
      $.each(slist,function (i,n) {
       shi.append('<option value="'+n.id+'">'+n.title+'</option>');
      });
     });
    }
   });
  
   $('#shi').change(function () {
    var sid=$(this).val();
    if(sid!='0'){
     $.get('/shi/',{'sid':sid},function (data) {
      var slist=data.slist;
      var shi=$('#qu').empty().append('<option value="0">请选择</option>');
      $.each(slist,function (i,n) {
       shi.append('<option value="'+n.id+'">'+n.title+'</option>');
      });
     });
    }
   });
  });
</script>
</head>
<body>
<select id="sheng">
<option value="0">请选择</option>
</select>
<select id="shi">
<option value="0">请选择</option>
</select>
<select id="qu">
<option value="0">请选择</option>
</select>
</body>
</html>




运行服务器,在浏览器中输入如下网址
http://127.0.0.1:8000/area1/
浏览效果如下图

打开booktest/views.py文件,定义视图sheng,用于获取省信息
?
1
url('^sheng/$',views.sheng),





?
1
2
3
4
5
6
7
8
9
10
from django.http import JsonResponse
def sheng(request):
slist=AreaInfo.objects.filter(aParent__isnull=True)
'''
[{id:,title:},{},{}]
'''
slist2=[]
for s in slist:
  slist2.append({'id':s.id,'title':s.atitle})
return JsonResponse({'slist':slist2})




打开booktest/urls.py文件,配置url
?
1
url('^sheng/$',views.sheng),




在浏览器中输入如下网址
?
1
http://127.0.0.1:8000/sheng/




浏览效果如下图

打开booktest/views.py文件,定义视图shi,用于根据编号获取对应的子级信息,如果传递的是省编号则获取市信息,如果传递的是市编号则获取区县信息

?
1
2
3
4
5
6
7
8
#根据pid查询子级区域信息
def shi(request):
sid=request.GET.get('sid')
slist=AreaInfo.objects.filter(aParent_id=sid)
slist2=[]
for s in slist:
  slist2.append({'id':s.id,'title':s.atitle})
return JsonResponse({'slist':slist2})




打开booktest/urls.py文件,配置url
?
1
url('^shi/$',views.shi),




在浏览器中输入如下网址
http://127.0.0.1:8000/shi/?sid=140000/
浏览效果如下图



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?加入COS论坛

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 加入COS论坛

本版积分规则

COS系统论坛(cosxitong.cn)COS操作系统是由上海联彤与中科院软件研究所在北京时间2014年1月15日在北京联合发布具有自主知识产权的操作系统COS(China Operating System,意为中国操作系统),该操作系统可应用于个人电脑、智能掌上终端、机顶盒、智能家电等领域。
友链QQ:673672871
© 2014 COS操作系统论坛 Powered by Discuz!X 3.2  Template by COS系统论坛 
快速回复 返回顶部 返回列表