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插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
jQuery实现带进度条的轮播图
Sep 13 jQuery
jquery实现广告上下滚动效果
Mar 04 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
动态生成gif格式的图像要注意?
2006/10/09 PHP
深入array multisort排序原理的详解
2013/06/18 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
Windows上php5.6操作mongodb数据库示例【配置、连接、获取实例】
2019/02/13 PHP
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
jQuery技巧总结
2011/01/01 Javascript
解析Jquery取得iframe中元素的几种方法
2013/07/04 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
微信小程序模板template简单用法示例
2018/12/04 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
javascript实现倒计时关闭广告
2021/02/09 Javascript
Python中使用 Selenium 实现网页截图实例
2014/07/18 Python
python进程类subprocess的一些操作方法例子
2014/11/22 Python
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
python机器学习库常用汇总
2017/11/15 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
用django-allauth实现第三方登录的示例代码
2019/06/24 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
生产部统计员岗位职责
2014/01/05 职场文书
初中地理教学反思
2014/01/11 职场文书
酒店拾金不昧表扬信
2014/01/18 职场文书
2014政务公开实施方案
2014/02/19 职场文书
护理专业自荐信范文
2014/02/26 职场文书
高中军训第一天感言
2014/03/06 职场文书
《池塘边的叫声》教学反思
2014/04/12 职场文书
2014年学雷锋活动总结
2014/06/26 职场文书
羊脂球读书笔记
2015/06/30 职场文书