Django中使用jquery的ajax进行数据交互的实例代码
程序员文章站
2023-12-29 15:55:04
jquery框架中提供了$.ajax、$.get、$.post方法,用于进行异步交互,由于django中默认使用csrf约束,推荐使用$.get
示例:实现省市区的选择...
jquery框架中提供了$.ajax、$.get、$.post方法,用于进行异步交互,由于django中默认使用csrf约束,推荐使用$.get
示例:实现省市区的选择
最终实现效果如图:
将jquery文件拷贝到static/js/目录下
打开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
<!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>
运行服务器,在浏览器中输入如下网址
浏览效果如下图
打开booktest/views.py文件,定义视图sheng,用于获取省信息
url('^sheng/$',views.sheng),
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/
浏览效果如下图
打开booktest/views.py文件,定义视图shi,用于根据编号获取对应的子级信息,如果传递的是省编号则获取市信息,如果传递的是市编号则获取区县信息
#根据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),
在浏览器中输入如下网址
浏览效果如下图
在浏览器中输入如下网址
选择效果如下图
总结
以上所述是小编给大家介绍的django中使用jquery的ajax进行数据交互的实例代码,希望对大家有所帮助!
推荐阅读
-
Django中使用jquery的ajax进行数据交互的实例代码
-
JQuery Ajax 在asp.net中的使用并调用后台实例讲解
-
C#中通过使用Connection类来实现打开/关闭数据库的代码实例
-
C#中通过使用Connection类来实现打开/关闭数据库的代码实例
-
django中使用jquery ajax post数据出现403错误的解决办法(两种方法)
-
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
-
使用vue-resource进行数据交互的实例
-
使用jquery中封装的$.Ajax()进行异步通信并使用json方式实现数据传输
-
使用jQuery实现两个div中按钮互换位置的实例代码
-
使用FormData进行Ajax请求上传文件的实例代码