Django中使用jquery的ajax进行数据交互的实例代码


Posted in jQuery onOctober 15, 2017

jquery框架中提供了$.ajax、$.get、$.post方法,用于进行异步交互,由于Django中默认使用CSRF约束,推荐使用$.get

示例:实现省市区的选择

最终实现效果如图:

Django中使用jquery的ajax进行数据交互的实例代码

将jquery文件拷贝到static/js/目录下

Django中使用jquery的ajax进行数据交互的实例代码

打开booktest/views.py文件,定义视图area1,用于显示下拉列表

#提供显示下拉列表的控件,供用户操作
def area1(request):
 return render(request,'booktest/area1.html')

打开booktest/urls.py文件,配置url

url('^area1/$',views.area1),

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

Django中使用jquery的ajax进行数据交互的实例代码Django中使用jquery的ajax进行数据交互的实例代码

<!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/

浏览效果如下图

Django中使用jquery的ajax进行数据交互的实例代码

打开booktest/views.py文件,定义视图sheng,用于获取省信息

url('^sheng/$',views.sheng),

Django中使用jquery的ajax进行数据交互的实例代码Django中使用jquery的ajax进行数据交互的实例代码

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

url('^sheng/$',views.sheng),

在浏览器中输入如下网址

http://127.0.0.1:8000/sheng/

浏览效果如下图

Django中使用jquery的ajax进行数据交互的实例代码

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

Django中使用jquery的ajax进行数据交互的实例代码Django中使用jquery的ajax进行数据交互的实例代码

#根据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

url('^shi/$',views.shi),

在浏览器中输入如下网址

http://127.0.0.1:8000/shi/?sid=140000/

浏览效果如下图

Django中使用jquery的ajax进行数据交互的实例代码

在浏览器中输入如下网址

http://127.0.0.1:8000/shi/

选择效果如下图

Django中使用jquery的ajax进行数据交互的实例代码

总结

以上所述是小编给大家介绍的Django中使用jquery的ajax进行数据交互的实例代码,希望对大家有所帮助!

jQuery 相关文章推荐
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
jQuery validata插件实现方法
Jun 25 jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 #jQuery
jQuery响应滚动条事件功能示例
Oct 14 #jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 #jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 #jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 #jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 #jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 #jQuery
You might like
详解PHP显示MySQL数据的三种方法
2008/06/05 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
python 图片验证码代码
2008/12/07 Python
Django静态资源URL STATIC_ROOT的配置方法
2014/11/08 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
Python多线程爬虫实战_爬取糗事百科段子的实例
2017/12/15 Python
python实现画一颗树和一片森林
2018/06/25 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
Python多项式回归的实现方法
2019/03/11 Python
PyTorch中的padding(边缘填充)操作方式
2020/01/03 Python
Python Selenium截图功能实现代码
2020/04/26 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
新奇的小玩意:IWOOT
2016/07/21 全球购物
Zooplus葡萄牙:欧洲领先的网上宠物商店
2018/07/01 全球购物
技校生自我鉴定范文
2013/09/26 职场文书
教师档案管理制度
2014/01/23 职场文书
公司营业员的自我评价
2014/03/04 职场文书
上党课的心得体会
2014/09/02 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
庆祝教师节活动总结
2015/03/23 职场文书
国家助学贷款承诺书
2015/04/30 职场文书
「约定的梦幻岛」作画发布诺曼生日新绘
2022/03/21 日漫
js面向对象编程OOP及函数式编程FP区别
2022/07/07 Javascript
MySQL自定义函数及触发器
2022/08/05 MySQL