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源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jquery的$().each和$.each的区别
Jan 18 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
jquery实现拖拽小方块效果
Dec 10 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
给海燕B411配件机起死回生配上件
2021/03/02 无线电
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
PHP时间戳 strtotime()使用方法和技巧
2013/10/29 PHP
Ubuntu12下编译安装PHP5.3开发环境
2015/03/27 PHP
CodeIgniter读写分离实现方法详解
2016/01/20 PHP
Smarty分页实现方法完整实例
2016/05/11 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
JavaScript Prototype对象
2009/01/07 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
js基础之DOM中document对象的常用属性方法详解
2016/10/28 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
Vue shopCart 组件开发详解
2018/01/26 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
js基础之事件捕获与冒泡原理
2019/10/09 Javascript
浅谈Three.js截图并下载的大坑
2019/11/01 Javascript
Python实现字符串逆序输出功能示例
2017/06/24 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
python正则表达式之对号入座篇
2018/07/24 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
Python 中pandas索引切片读取数据缺失数据处理问题
2019/10/09 Python
tensorflow 实现打印pb模型的所有节点
2020/01/23 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
HTML5 Canvas渐进填充与透明实现图像的Mask效果
2013/07/11 HTML / CSS
市场营销管理毕业生自荐信
2014/03/03 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
pytorch 如何使用batch训练lstm网络
2021/05/28 Python
Spring中bean集合注入的方法详解
2022/07/07 Java/Android