urls.py:
url(r'^ajaxstudents/$', views.ajaxstudents), url(r'^getstudentsinfo/$', views.getstudentsinfo),
views.py:
def ajaxstudents(request): return render(request,'myApp/ajaxstudents.html') def getstudentsinfo(request): stus = Students.stuObj.all() list = [] for stu in stus: list.append([stu.sname,stu.sage]) return JsonResponse({"students":list})
ajaxstudents.html:
<script type="text/javascript" src="{% static 'myApp/js/jquery-1.11.3.js' %}"></script> <h1>ajax请求学生信息</h1> <button id="btn">显示学生信息</button> <script type="text/javascript"> var btn = document.getElementById("btn") btn.onclick = function(){ $.ajax({ type:"get", url:"/sunck/getstudentsinfo/", dataType:"json", success:function(data,textStatus){ var d = data["students"] for(var i = 0; i < d.length; i++){ document.write('<p>'+d[i]+'</p>') } } }) } </script>
1.访问http://127.0.0.1:8000/sunck/ajaxstudents/(主路由里设置了一个^sunck/),显示
2.然后“显示学生信息”绑定了一个点击事件,该事件就是发送一个ajax请求,发送的路径是/sunck/getstudentsinfo/,请求方式是get,因为是“拿信息”
3.到了/sunck/getstudentsinfo/路径后,执行相应的视图函数getstudentsinfo,该函数的功能就是把所有学生的姓名和年龄放到一个列表里,然后用JsonResponse类把该列表返回到ajax(return JsonResponse({"students":list}))
4.返回到ajax后是ajax里的data拿到数据,data["students"]就相当于视图函数里的那个列表了,然后可以循环打印数据
笔记:
HttpResponse和JsonResponse区别:
简单点就是,HttpResponse 返回的是一个字符串类型的数据,JsonResponse 返回的是一个json格式的数据
#如果HttpResponse返回,ajax里还需要进行json解析 #views.py return HttpResponse(json.dumps({"msg":"ok!"})) #index.html var data=json.parse(data) console.log(data.msg);
#如果JsonReponse返回,两边都不需要进行json的序列化与反序列化,ajax接受的直接是一个对象 #views.pyreturn JsonResponse({"msg":"ok!"}) #index.html console.log(data.msg);