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动态追加页面数据以及事件委托详解
May 06 jQuery
jQuery表单设置值的方法
Jun 30 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 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实现下载功能的代码
2012/09/29 PHP
PHP中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
PHP移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
php中mysql连接方式PDO使用详解
2015/02/25 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
discuz论坛更换域名,详细文件修改步骤
2020/12/09 PHP
javascript同步Import,同步调用外部js的方法
2008/07/08 Javascript
JavaScript获取路径设计源码
2014/05/22 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
2014/05/22 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
详解javascript事件绑定使用方法
2016/10/20 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
JS中的phototype详解
2017/02/04 Javascript
使用JavaScript实现链表的数据结构的代码
2017/08/02 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
浅谈Python 中整型对象的存储问题
2016/05/16 Python
Python中matplotlib中文乱码解决办法
2017/05/12 Python
PyCharm在win10的64位系统安装实例
2017/11/26 Python
对python3新增的byte类型详解
2018/12/04 Python
Python 确定多项式拟合/回归的阶数实例
2018/12/29 Python
Pycharm运行加载文本出现错误的解决方法
2019/06/27 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
村庄环境整治方案
2014/05/15 职场文书
自习课吵闹检讨书范文
2014/09/26 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
农村党员干部承诺书
2015/05/04 职场文书