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 replace方法去空格
May 08 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
jquery css实现流程进度条
Mar 26 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
apache配置虚拟主机的方法详解
2013/06/17 PHP
php发送post请求的三种方法
2014/02/11 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
php数组去除空值函数分享
2015/02/02 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
javascript实现上传图片前的预览(TX的面试题)
2007/08/20 Javascript
用js模拟JQuery的show与hide动画函数代码
2010/09/20 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
2017/01/13 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
webpack4.x打包过程详解
2018/07/18 Javascript
Element Popover 弹出框的使用示例
2020/07/26 Javascript
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
Python3爬虫学习之爬虫利器Beautiful Soup用法分析
2018/12/12 Python
vscode 配置 python3开发环境的方法
2019/09/19 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
什么是Python中的顺序表
2020/06/02 Python
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
移动通信专业自荐信范文
2013/11/12 职场文书
校长寄语大全
2014/04/09 职场文书
会计学毕业生求职信
2014/06/25 职场文书
个人授权委托书范本
2014/09/14 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
购房个人委托书范本
2014/10/11 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书
sql中mod()函数取余数的用法
2021/05/29 SQL Server
SSM VUE Axios详解
2021/10/05 Vue.js
MySQL之select、distinct、limit的使用
2021/11/11 MySQL