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实现百度登录框的动态切换效果
Apr 21 jQuery
jquery实现图片轮播器
May 23 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 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
关于PHPDocument 代码注释规范的总结
2013/06/25 PHP
PHP URL参数获取方式的四种例子
2014/02/28 PHP
Thinkphp搭建包括JS多语言的多语言项目实现方法
2014/11/24 PHP
php 调用ffmpeg获取视频信息的简单实现
2017/04/03 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
JavaScript使用过程中需要注意的地方和一些基本语法
2010/08/26 Javascript
Js切换功能的简单方法
2010/11/23 Javascript
使用jquery动态加载javascript以减少服务器压力
2012/10/29 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
js取模(求余数)隔行变色
2014/05/15 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
深入理解jQuery之防止冒泡事件
2016/05/24 Javascript
B/S(Web)实时通讯解决方案分享
2017/04/06 Javascript
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
vue基于mint-ui的城市选择3级联动的示例
2017/10/25 Javascript
vue使用监听实现全选反选功能
2018/07/06 Javascript
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
vue-router传递参数的几种方式实例详解
2018/11/13 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
json解析大全 双引号、键值对不在一起的情况
2019/12/06 Javascript
小程序实现可拖动的悬浮按钮
2020/09/07 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
python查找目录下指定扩展名的文件实例
2015/04/01 Python
Python获取系统默认字符编码的方法
2015/06/04 Python
设计模式中的原型模式在Python程序中的应用示例
2016/03/02 Python
python 获取url中的参数列表实例
2018/12/18 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
Python搭建代理IP池实现接口设置与整体调度
2019/10/27 Python
基于matplotlib xticks用法详解
2020/04/16 Python
Python调用JavaScript代码的方法
2020/10/27 Python
个人现实表现材料
2014/02/04 职场文书
艺术教育实施方案
2014/05/03 职场文书
幼儿园教师节演讲稿
2014/09/03 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
党员干部公开承诺书范文
2015/04/27 职场文书