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插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
Jquery获取radio选中值实例总结
Jan 17 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
jQuery实现二级导航菜单的示例
Sep 30 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 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
PHP删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
PHP判断指定时间段的2个方法
2014/03/14 PHP
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
jQuery each()方法的使用方法
2010/03/18 Javascript
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
js 浏览器事件介绍
2012/03/30 Javascript
javascipt匹配单行和多行注释的正则表达式
2013/11/20 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
js实现二代身份证号码验证详解
2014/11/20 Javascript
基于JavaScript实现弹出框效果
2016/02/19 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
2016/03/22 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
vue+axios 前端实现的常用拦截的代码示例
2018/08/23 Javascript
vue使用代理解决请求跨域问题详解
2019/07/24 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
JavaScript实现横版菜单栏
2020/03/17 Javascript
python分析apache访问日志脚本分享
2015/02/26 Python
Python多层嵌套list的递归处理方法(推荐)
2016/06/08 Python
python实现Windows电脑定时关机
2018/06/20 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
python 定时器,轮询定时器的实例
2019/02/20 Python
解决Tensorflow 使用时cpu编译不支持警告的问题
2020/02/03 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
Probikekit日本:自行车套件,跑步和铁人三项装备
2017/04/03 全球购物
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
毕业生教师求职信
2013/10/20 职场文书
大四学生毕业自荐信
2013/11/07 职场文书
办公自动化专业大学生职业规划书
2014/03/06 职场文书
会计工作决心书
2014/03/11 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
干部作风建设工作总结
2014/10/29 职场文书
毕业实习计划书
2015/01/16 职场文书
2015年煤矿工作总结
2015/04/28 职场文书
银行反洗钱宣传活动总结
2015/05/08 职场文书