ajax请求简介：

ajax是利用前端的技术，向服务器发送一个异步请求

原有的请求在请求后需要刷新整张页面，但是用ajax请求后只需要刷新一部分页面即可；

xhr基础属性：

Jquery与ajax：

使用$.ajax({})

Ajax的html页面：

<body>
<div id="show">我是原来展示的东西</div>
<button id="button">get JQurey</button>
<script src="{% static 'js/jquery-3.1.1.min.js' %}" ></script>
<script>$(function (){                                           #方法名$('#button').click(function (){                      #如何出发ajax$.ajax({                                     url:"{% url 'JQ_get_change' %}",         #ajax消息请求路由type:'GET',                              #请求方式data:'name=mahuayu',                        success:function (res){                  #在哪个地方修改$('#show').html(res)                  }})})})

那么问题来了现在是传递一句话使用 return HttpResponse（XXXX）可以实现

如果要传递大量的数据该怎么办呢？

json表示：

获取json对象：

<script src="{% static 'js/jquery-3.1.1.min.js' %}" ></script>
<script>var user={"username" : "mahuayu","age" : 22,}var user_list=[{"username" : "mahuayu","age" : 22,},{"username" : "zhangyaling","age" : 22,},{"username" : "xiaohuang","age" : 22,},{"username" : "xiaohong","age" : 22,}]function showjson(){{#var user={#}{#    "username" : "mahuayu",#}{#    "age" : 22,#}{# #}{#console.log("username",user.username)#}{#console.log("age",user.age)#}$.each(user_list,function (i,obj){console.log("id:"+i);console.log("name:"+obj.username);})}</script>

页面展示：

Python中json的表示：

Ajax发送Get请求:

实际小训练展示：

从数据库获取数据返回js格式的方式一：

def showjson_getuser_change(request):users = ajaxuser.objects.all()user_list=[]for user in users:d={}d['id'] =user.idd["name"] = user.named['age']=user.aged['phonenumber']=user.phonenumberuser_list.append(d)return JsonResponse(user_list,safe=False)

从数据库获取数据返回js格式的方式二：url页面：

<!DOCTYPE html>
{% load static %}
<html lang="en">
<head><meta charset="UTF-8"><title>静态展示用户页面</title>
</head>
<body>
<script src="{% static 'js/jquery-3.1.1.min.js' %}" ></script>
<button id="showuser">获取用户数据</button>
<table border="2"><tr><th> 编号</th><th> 姓名</th><th> 年龄</th><th> 手机号</th></tr><tbody id="usertable"></tbody></table><script>$(function (){$('#showuser').click(function (){$.ajax({url:"{% url 'showjson_get_change' %}",type:'GET',dataType: 'json',success:function (res){var html='';$.each(res,function (i,obj){html+='<tr>'html+='<td>'+obj.id+'</td>'html+='<td>'+obj.name+'</td>'html+='<td>'+obj.age+'</td>'html+='<td>'+obj.phonenumber+'</td>'html+='</tr>'});$('#usertable').html(html);}})})})</script></body>
</html>

展示效果：