Django和Ajax
一、什么是Ajax
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
- 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
- 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
二、Ajax的优点
优点：
- AJAX使用JavaScript技术向服务器发送异步请求；
- AJAX请求无须刷新整个页面；
- 因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以AJAX性能高；
- 两个关键点:1.局部刷新，2.异步请求
三、基于jQuery实现的Ajax
1.基本语法
// 在html script中使用 $.ajax({ url:'/index/', //提交数据路径，不写默认是当前路径 type:'post', //标定ajax的请求方式 data:{'name':'lqz','age':18}, //data后面跟的就是你提交给后端的数据 //success为回调函数 success:function (data) { //data即后端给你返回的数据 alert(data) } })
2.利用ajax提交表单中的数据 （数字的相加例子）
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <input type="text" id="i1">+<input type="text" id="i2">=<input type="text" id="i3"> <button class="btn btn-primary" id="d1" >求和</button> <script> //绑定点击事件 $('#d1').click(function () { //ajax写法 $.ajax({ url:'/index/' , type:'post', //设置发送方式是post请求 //获取两个输入框的值 data:{'i1':$('#i1').val(),'i2':$('#i2').val()}, //data是提交给后端的数据 //success回调函数 success:function (data) { //data是后端返回的数据 $('#i3').val(data) } }) }) </script> </body> </html>
views.py
def index(request): # print(request.is_ajax()) # 用来判断当前请求方式是否是ajax请求 if request.is_ajax(): if request.method == 'POST': # print(request.POST) #i1和i2是ajax传递过来的data字典键 i1 = request.POST.get('i1') i2 = request.POST.get('i2') # 后端获取的前端数据 都是字符串格式 res = int(i1) + int(i2) return HttpResponse(res) #返回给ajax return render(request,'index.html')
需要注意的
1.在设置ajax的url路径的时候，不写就是朝当前地址提交数据，如果你写了要注意路径格式,比如是这样（'/index/'） 2.type是设置ajax的请求方式，如果你写的是post,views视图就是通过request.POST.get获取数据，如果type是get请求方式，就是通过request.GET.get获取数据。type值为空时，默认是get方法
四、form表单和ajax进行文件上传
1.contentType前后端传输数据编码格式
前后端传输数据编码格式
- urlencoded
- formdata
- json
2.form表单和ajax上传文件区别
form表单
1.默认使用的编码格式是urlencoded 数据格式：name = jason&pwd=123 django后端针对urlencoded编码格式的数据会自动解析并放在request.POST中供用户获取。 2.可以修改formdata传文件 django后端针对formdata编码格式的数据会自动解析并放在request.FILES中供用户获取。
注意：前后端传输数据的时候一定要保证数据格式和你的编码格式是一致的
模板层
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <form action="" enctype="multipart/form-data" method="post"> <input type="text" name="name" id="name"> <input type="file" name="myfile" id="myfile">
<input type='submit' value = 'form表单上传文件'> //form表单上传文件格式
</form> <button id="btn">ajax提交文件</button> //ajax上传文件格式，触发下面的ajax <script> //绑定提交按钮 $('#btn').click(function () { //上传文件，建议使用Formdata var formdata =new FormData(); //既可以传普通键值对，也可以传文件 //添加普通键值对 formdata.append('name',$('#name').val()); //传文件，$('#myfile')[0].files拿到的是文件列表，取第0个把具体文件拿出来 formdata.append('myfile',$('#myfile')[0].files[0]); $.ajax({ url:'', type:'post', data:formdata, processData:false, //告诉前端不要处理数据 contentType:false, //不适用任何编码，因为formdata对象自带编码，django后端也能够识别formdata对象 success:function (data) { //后端返回给前端信息 alter(data) } }) }) </script> </body> </html>
视图层
#forms表单上传文件 def home(request): if request.method == 'GET': //渲染页面 return render(request,'home.html') #获取文件信息 myfile = request.FILES.get('myfile') //获取form表单上传的文件 print(myfile) //上传文件名 return HttpResponse('ok') #ajax上传文件 def home_ajax(request): if request.is_ajax(): if request.method == 'POST': name = request.POST.get('name') print(name) #input框内容 myfile = request.FILES.get('myfile') print(myfile) #文件名 print(myfile.name) #文件名 return HttpResponse('ok') return render(request,'home.html')
路由层
url(r'^home/',views.home,name='home'), //form表单上传文件 url(r'^home_ajax/',views.home_ajax,name='home_ajax'), //ajax上传文件
注意点
1.form表单上传文件需要指定编码格式enctype = 'multipart/form-data'。ajax也需要设置一样的编码格式，然后需要创建一个Formdata对象
获取file文件的内容都是通过request.FILES.get() 2.通过append的方法，给对象传值，相当于设置了一个个的键值对。 3.必须要设置这两个参数 processData:false contentType:false
五、基于ajax提交json格式数据
1.ajax提交数据
ajax默认数据提交方式也是urlencoded
ajax发送json格式数据
django后端针对json格式的数据 并不会自动解析放到request.POST或者request.FILES里面
它并不会解析json格式数据 而是将它原封不动的放在request.body中了
模板层
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <input type="text" name="name" id="d1"> <input type="password" name="password" id="d2"> <button id="d3">ajax提交json格式数据</button> </body> <script> $('#d3').click(function () { var pos_data = {'name':$('#d1').val(),'password':$('#d2').val()}; //获取input框数据 //JSON.stringify相当于json.dumps()，转化成json格式的字符串 var pos = JSON.stringify(pos_data); //转换格式 $.ajax({ url:'', type:'post', data:pos, //发送的数据 contentType:'application/json', //告诉后端你这次的数据是json格式
dataType:'json', success:function (data) { alert(data) } }) }) </script> </html>
视图层
#ajax提交json数据 def home_json(request): if request.method == 'POST': #后端 需要手动去request.body中获取json格式数据 print(request.body) import json bytes_str = request.body.decode('utf-8') print(json.loads(bytes_str)) return HttpResponse('ok') return render(request,'home_json.html')
路由层
url(r'^home_json/',views.home_json,name='home_json'),
总结：
1.如果不是上传文件，form表单input的话，就直接传了,contentType默认是urlencoded编码方式 2.如果是上传文件，ajax上传文件就是先创建一个Formdata对象，通过append,把key,value参数传进去。注意：form表单和ajax上传的文件都是通过request.FILES.get()获取。 3.ajax提交json格式的数据，先创造出一个对象，把数据放在对象里面，然后转换成json格式的字符串，通过JSON.stringify(data),这里的contentType必须设置为'application/json',这样它的数据在视图中就能通过request.body获取到，是二进制格式，需要转换成字符串。 4、在前端接收到后台json格式数据，可以在ajax那里写dataType:'json'，它会自动转换成对象
六、序列化组件
from django.core import serializers # django自带的一个小型的序列化工具 def reg(request): user_list = models.User.objects.all() res = serializers.serialize('json',user_list) return render(request,'index.html',locals())
[{ "model": "app01.user", "pk": 1, "fields": { "username": "jason", "age": 18, "gender": 1 } }, { "model": "app01.user", "pk": 2, "fields": { "username": "tank", "age": 24, "gender": 3 } }, { "model": "app01.user", "pk": 3, "fields": { "username": "egon", "age": 73, "gender": 2 } }, { "model": "app01.user", "pk": 7, "fields": { "username": "kevin", "age": 29, "gender": 4 } }]
七、自定义分页器
批量插入数据 bulk_create()
for i in range(1000): models.Book.objects.create(title='第%s本书'%i) 上面这种方式 效率极低 l = [] for i in range(10000): l.append(models.Book(title='第%s本书'%i)) models.Book.objects.bulk_create(l) # 批量插入数据
自定义分页器的使用
拷贝下面分页器代码，放在某个py文件里面
class Pagination(object): def __init__(self, current_page, all_count, per_page_num=2, pager_count=11): """ 封装分页相关数据 :param current_page: 当前页 :param all_count: 数据库中的数据总条数 :param per_page_num: 每页显示的数据条数 :param pager_count: 最多显示的页码个数 用法: queryset = model.objects.all() page_obj = Pagination(current_page,all_count) page_data = queryset[page_obj.start:page_obj.end] 获取数据用page_data而不再使用原始的queryset 获取前端分页样式用page_obj.page_html """ try: current_page = int(current_page) except Exception as e: current_page = 1 if current_page < 1: current_page = 1 self.current_page = current_page self.all_count = all_count self.per_page_num = per_page_num # 总页码 all_pager, tmp = divmod(all_count, per_page_num) if tmp: all_pager += 1 self.all_pager = all_pager self.pager_count = pager_count self.pager_count_half = int((pager_count - 1) / 2) @property def start(self): return (self.current_page - 1) * self.per_page_num @property def end(self): return self.current_page * self.per_page_num def page_html(self): # 如果总页码 < 11个： if self.all_pager <= self.pager_count: pager_start = 1 pager_end = self.all_pager + 1 # 总页码 > 11 else: # 当前页如果<=页面上最多显示11/2个页码 if self.current_page <= self.pager_count_half: pager_start = 1 pager_end = self.pager_count + 1 # 当前页大于5 else: # 页码翻到最后 if (self.current_page + self.pager_count_half) > self.all_pager: pager_end = self.all_pager + 1 pager_start = self.all_pager - self.pager_count + 1 else: pager_start = self.current_page - self.pager_count_half pager_end = self.current_page + self.pager_count_half + 1 page_html_list = [] # 添加前面的nav和ul标签 page_html_list.append(''' <nav aria-label='Page navigation>' <ul class='pagination'> ''') first_page = '<li><a href="?page=%s">首页</a></li>' % (1) page_html_list.append(first_page) if self.current_page <= 1: prev_page = '<li class="disabled"><a href="#">上一页</a></li>' else: prev_page = '<li><a href="?page=%s">上一页</a></li>' % (self.current_page - 1,) page_html_list.append(prev_page) for i in range(pager_start, pager_end): if i == self.current_page: temp = '<li class="active"><a href="?page=%s">%s</a></li>' % (i, i,) else: temp = '<li><a href="?page=%s">%s</a></li>' % (i, i,) page_html_list.append(temp) if self.current_page >= self.all_pager: next_page = '<li class="disabled"><a href="#">下一页</a></li>' else: next_page = '<li><a href="?page=%s">下一页</a></li>' % (self.current_page + 1,) page_html_list.append(next_page) last_page = '<li><a href="?page=%s">尾页</a></li>' % (self.all_pager,) page_html_list.append(last_page) # 尾部添加标签 page_html_list.append(''' </nav> </ul> ''') return ''.join(page_html_list)
后端代码
from app01.utils.mypage import Pagination //导入分页器代码 book_list = models.Book.objects.all() //查询所有数据 current_page = request.GET.get("page",1) all_count = book_list.count() //总条数 page_obj = Pagination(current_page=current_page,all_count=all_count,per_page_num=10) page_queryset = book_list[page_obj.start:page_obj.end] return render(request,'booklist.html',locals())
前端代码
{% for book in page_queryset %}
<p>{{ book.title }}</p>
{% endfor %}
{{ page_obj.page_html|safe }}
八、模型表参数choice
比如选择性别男女，往数据库中填写的是数字1,2
模型层
class User(models.Model): username = models.CharField(max_length=32) age = models.IntegerField() choices = ( (1,'男'),(2,'女'),(3,'其他') ) gender = models.IntegerField(choices=choices)
视图层
user_obj = models.User.objects.filter(pk=1).first() print(user_obj.get_gender_display()) #男 """ 只要是choices字段 在获取数字对应的注释 固定语法 get_choices字段名_display() """
注意：
1 存choice里面罗列的数字与中文对应关系 print(user_obj.get_gender_display()) 只要是choices字段 通过数字获取对应的汉字
固定语法 get_choices字段名_display() 2 存没有罗列出来的数字 不会报错 还是展示数字