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实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
jQuery表单设置值的方法
Jun 30 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
jQuery创建折叠式菜单
Jun 15 jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
jQuery实现全选按钮
Jan 01 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的一个完整SMTP类(解决邮件服务器需要验证时的问题)
2006/10/09 PHP
thinkPHP中配置的读取与C方法详解
2016/12/05 PHP
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
Javascript this 的一些学习总结
2012/08/31 Javascript
JQuery 操作/获取table具体代码
2013/06/13 Javascript
浅谈JavaScript Array对象
2014/12/29 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
Bootstrap中data-target 到底是什么
2017/02/14 Javascript
jQuery自定义多选下拉框效果
2017/06/19 jQuery
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
Python实现合并同一个文件夹下所有PDF文件的方法示例
2018/04/28 Python
Python3的介绍、安装和命令行的认识(推荐)
2018/10/20 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
HTML5开发动态音频图的实现
2020/07/02 HTML / CSS
Lookfantastic香港官网:英国知名美妆购物网站
2018/06/19 全球购物
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
英文求职信结束语大全
2013/10/26 职场文书
正风肃纪剖析材料
2014/02/18 职场文书
建议书标准格式
2014/03/12 职场文书
《忆江南》教学反思
2014/04/07 职场文书
2014年党课学习材料
2014/05/11 职场文书
环保建议书200字
2014/05/14 职场文书
付款承诺函范文
2015/01/21 职场文书
文言文辞职信
2015/02/28 职场文书
个人年终总结范文
2015/03/09 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
乒乓球比赛通知
2015/04/27 职场文书
Python数据处理的三个实用技巧分享
2022/04/01 Python
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers