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 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
jQuery实现日历效果
Sep 11 jQuery
jQuery实现推拉门效果
Oct 19 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
BBS(php &amp; mysql)完整版(二)
2006/10/09 PHP
windows环境下php配置memcache的具体操作步骤
2013/06/09 PHP
PHP与Java进行通信的实现方法
2013/10/21 PHP
js 获取Listbox选择的值的代码
2010/04/15 Javascript
基于jquery的一个图片hover的插件
2010/04/24 Javascript
jQuery把表单元素变为json对象
2013/11/06 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
js获取时间(本周、本季度、本月..)
2013/11/22 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
Angular.js中下拉框实现渲染html的方法
2017/06/18 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
vue插件实现v-model功能
2018/09/10 Javascript
vue计算属性get和set用法示例
2019/02/08 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
python回调函数的使用方法
2014/01/23 Python
python3.5 tkinter实现页面跳转
2018/01/30 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
python 检查文件mime类型的方法
2018/12/08 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
在python中利用numpy求解多项式以及多项式拟合的方法
2019/07/03 Python
python处理excel绘制雷达图
2019/10/18 Python
Flask框架搭建虚拟环境的步骤分析
2019/12/21 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
Selenium获取登录Cookies并添加Cookies自动登录的方法
2020/12/04 Python
全面总结使用CSS实现水平垂直居中效果的方法
2016/03/10 HTML / CSS
十佳教师事迹材料
2014/01/11 职场文书
餐厅经理岗位职责范本
2014/02/17 职场文书
中药学专业求职信
2014/05/31 职场文书
个人借条范本
2015/05/25 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
Go语言读取txt文档的操作方法
2022/01/22 Golang
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python
MySQL 计算连续登录天数
2022/05/11 MySQL