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实现文章图片弹出放大效果
Apr 06 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
jquery.pager.js分页实现详解
Jul 29 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
jQuery操作元素追加内容示例
Jan 10 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
菜鸟修复电子管记
2021/03/02 无线电
关于拼配咖啡,你要知道
2021/03/03 咖啡文化
PHP编写文件多服务器同步程序
2016/07/02 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
Yii框架日志操作图文与实例详解
2019/09/09 PHP
Thinkphp极验滑动验证码实现步骤解析
2020/11/24 PHP
浏览器解析js生成的html出现样式问题的解决方法
2012/04/16 Javascript
Javascript 键盘事件的组合使用实现代码
2012/05/04 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
推荐一个自己用的封装好的javascript插件
2015/01/29 Javascript
javaScript基础语法介绍
2015/02/28 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
2017/01/23 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
Openlayers显示地理位置坐标的方法
2020/09/28 Javascript
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
Python读写Excel文件的实例
2013/11/01 Python
pyqt4教程之实现windows窗口小示例分享
2014/03/07 Python
Python生成pdf文件的方法
2014/08/04 Python
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
python执行外部程序的常用方法小结
2015/03/21 Python
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
代理班主任的自我评价
2014/02/04 职场文书
后勤部经理岗位职责
2014/02/23 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
教育合作协议范本
2014/10/17 职场文书
MySQL复制问题的三个参数分析
2021/04/07 MySQL
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js
Python并发编程实例教程之线程的玩法
2021/06/20 Python
在Spring-Boot中如何使用@Value注解注入集合类
2021/08/02 Java/Android
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技