django框架
今日内容:
1.choices字段(也可以成为参数)
2.MTV与MVC模型
3.contentType前后端传输数据编码格式
4.Ajax
5.序列化组件
6.Ajax结合sweetalert组件
7.自定义分页器的使用
1.choices字段(也可以称为参数)
建立一个对应关系的,比如说有一个性别字段,分为男和女,你写字符比较占用资源,
可以用数字来代表,用choices来建立一个对应关系,比如说0代表男,1代表女,
这样数量一旦多了起来,就大大的节省了资源。
代码实现:models里面
class User(models.Model): username = models.CharField(max_length=32) age = models.IntegerField() choices = ( (1,'男'),(2,'女'),(3,'其他') ) gender = models.IntegerField(choices=choices)
1 存choice里面罗列的数字与中文对应关系
print(user_obj.get_gender_display())
只要是choices字段 在获取数字对应的注释 固定语法
get_choices字段名_display()
2 存没有罗列出来的数字
不会报错 还是展示数字
测试文件:tests里面
固定写法
user_obj = models.User.objects.filter(pk=7).first()
print(user_obj.get_gender_display())
"""
只要是choices字段 在获取数字对应的注释 固定语法
get_choices字段名_display()
"""
2.MTV与MVC模型
MTV与MVC模型
django框架 自称为是MTV框架
M:models
T:templates
V:views
MVC
M:models
V:views
C:controller 控制器(urls)
ps:
本质上MTV其实也是MVC
3.contentType前后端传输数据编码格式
前后端传输数据编码格式 1.urlencoded 2.formdata 3.json
form表单:
默认使用的编码和格式是urlencoded 数据的格式:name=jason&pwd=123 就是什么等于什么 django后端针对urlencoded编码格式的数据会自动解析并放到request.POST中供用户获取 我们也可以修改为formdata 来传文件: django后端针对只要是符合urlencoded编码格式的数据(name=jason&pwd=123)都会自动解析并放到request.POST中供用户获取 如果是文件 只要你指定的编码是formdata 就会自动解析并放到request.FILES中 总结:前后端传输数据的时候 一定要保证数据格式和你的编码格式是一致的 不能骗人家!!!
前端代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <form action="" method="post" enctype="multipart/form-data"> 2 username:<input type="text" name="name"> 3 password:<input type="text" name="pwd"> 4 info:<input type="file" name="myfile"> 5 <input type="submit"> 6 </form>
后端代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 def index(request): 2 # 验证前后端传输数据的编码格式 3 if request.method == 'POST': 4 print('request.POST',request.POST) 5 print('request.FILES',request.FILES) 6 return render(request,'index.html')
Ajax提交数据:
ajax默认数据提交方式也是urlencoded
ajax发送json格式数据
django后端针对json格式的数据 并不会自动解析放到request.POST或者request.FILES里面
它并不会解析json格式数据 而是将它原封不动的放在request.body中了
4.Ajax简介:
AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步的Javascript和XML”。
即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
(这一特点给用户的感受是在不知不觉中完成请求和响应过程)
AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;
异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。
简单来说:
异步提交,局部刷新 请求方式 GET POST a标签href属性 GET请求 浏览器窗口输入url GET请求 form表单 GET/POST Ajax GET/POST 首先Ajax这门技术是js中的,但是原生的js操作Ajax比较繁琐,我们这里为了提高效率,直接使用jQuery封装版本的Ajax
Ajax基本语法:
url:提交的地址(不写的话就朝当前的地址发送)
type:提交的方式
data:提交的数据
success:回调函数
基于Ajax写一个小列子:
页面上有三个input框
在前两个input框中输入数字
点击按钮 发送ajax请求 不刷新页面的情况下
第三个框中自动算出两数之和
前端:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <input type="text" id="i1">+<input type="text" id="i2">=<input type="text" id="i3"> 2 <button id="b1">求和</button> 3 4 5 <script> 6 $('#b1').on('click',function () { 7 //点击按钮 朝后端发送post请求 8 $.ajax({ 9 url: '', // 控制发给谁,不写就是朝当前地址提交 10 type: 'post', //发送方式是post请求 11 data:{'i1':$('#i1').val(),'i2':$('#i2').val()}, // 发送的数据,点val是拿到input框里面的值 12 success:function (data) { //data形参是用来接收异步提交的结果的 ,回调函数 13 {#alert(data)#} 14 //将后端计算好的结果,通过DOM操作,渲染到第三个input框中 15 $('#i3').val(data) 16 } 17 }) 18 })
后端:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 def index(request): 2 # print(request.is_ajax()) # 可以用来判断当前请求方式是否为ajax请求 3 if request.is_ajax(): 4 if request.method == 'POST': 5 # 获取提交过来的数据,然后进行相加 6 i1 = request.POST.get('i1') 7 i2 = request.POST.get('i2') 8 # 不能直接相加,因为后端获取的前端数据,都是字符串格式 9 res = int(i1) + int(i2) 10 return HttpResponse(res) 11 return render(request,'index.html')
Ajax提交json格式的数据:
ajax默认数据提交方式也是urlencoded
ajax发送json格式数据
django后端针对json格式的数据 并不会自动解析放到request.POST或者request.FILES里面
它并不会解析json格式数据 而是将它原封不动的放在request.body中了
需要注意的点:前端
1.你需要告诉后端这次你提交的是json格式的数据:
contentType:'application/json'
2.你需要把你的数据转为json格式,因为前后端传输数据的话,一定要保证数据格式和你的编码格式是一致的
后端要注意的点:
1.后端接收数据的时候,必须要自己处理一下数据,数据再body里面,先解码,然后在loads反序列化一下
前端代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 2 <input type="text" id="i1">+<input type="text" id="i2">=<input type="text" id="i3"> 3 <button id="b1">求和</button> 4 5 $('#b1').on('click',function () { 6 //点击按钮 朝后端发送post请求 7 $.ajax({ 8 url: '', // 控制发给谁,不写就是朝当前地址提交 9 type: 'post', //发送方式是post请求 10 data:JSON.stringify({'username':'zy','password':123}), // 发送json格式的数据,需要明确的指定一下 11 contentType:'application/json',//告诉后端你这次的数据是json格式 12 success:function (data) { //data形参是用来接收异步提交的结果的 ,回调函数 13 {#alert(data)#} 14 //将后端计算好的结果,通过DOM操作,渲染到第三个input框中 15 $('#i3').val(data) 16 } 17 }) 18 })
后端代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 def index(request): 2 3 if request.method == 'POST': 4 print('request.POST',request.POST) 5 print('request.FILES',request.FILES) 6 # print(request.body) # 打印出来是二进制数据 7 # 后端需要手动去request.body中获取json格式数据,然后自己处理 8 json_str = request.body 9 import json 10 dic_bytes = json_str.decode('utf-8') 11 rel_d = json.loads(dic_bytes) 12 print(rel_d) 13 return render(request,'index.html')
Ajax传输文件数据:
注意点:
1.Ajax传输文件数据建议使用内置队象formdata: var formData = new FormData(); 因为formDatafeicha非常牛逼,既可以传普通的键值对,也可以传文件 2.添加普通的键值: formData.append(); 3.传文件,如何获取文件标签所存储的文件对象。固定语法 1.先用jQuery查找到存储文件的input标签 2.将jQuery查找到存储文件的input标签 3.利用原生js对象的方法去点files[0]获取到标签内部存储的文件对象 formData.append('my_file',$('#d1')[0].files[0]); 注意:ajax发送文件需要指定俩个额外的参数 processData:false,//告诉前端不要处理数据 contentType:false,//不适用任何编码,因为formdata对象自身自带编码 django后端也能够识别formdata对象
前端代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <button id="b1">求和</button> 2 3 {#ajax上传文件#} 4 <input type="file" id="d1"> 5 6 7 $('#b1').on('click',function () { 8 // ajax传输文件 建议使用内置对象formdata 9 var formData = new FormData(); //既可以传普通的键值对,也可以传文件 10 // 添加普通的键值 11 formData.append('username','zy'); 12 formData.append('password','123'); 13 //传文件,如何获取文件标签所存储的文件对象。固定语法 14 //1.先用jQuery查找到存储文件的input标签 15 //2.将jQuery查找到存储文件的input标签 16 //3.利用原生js对象的方法去点files[0]获取到标签内部存储的文件对象 17 formData.append('my_file',$('#d1')[0].files[0]); 18 $.ajax({ 19 url: '', // 控制发给谁,不写就是朝当前地址提交 20 type: 'post', //发送方式是post请求 21 data:formData, // 发送数据 22 // ajax发送文件需要指定俩个额外的参数 23 processData:false,//告诉前端不要处理数据 24 contentType:false,//不适用任何编码,因为formdata对象自身自带编码 django后端也能够识别formdata对象 25 success:function (data) { //data形参是用来接收异步提交的结果的 ,回调函数 26 {#alert(data)#} 27 //将后端计算好的结果,通过DOM操作,渲染到第三个input框中 28 $('#i3').val(data) 29 } 30 }) 31 })
后端代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 def index(request): 2 3 if request.method == 'POST': 4 print('request.POST',request.POST) 5 print('request.FILES',request.FILES) 6 return HttpResponse('OK') 7 8 return render(request,'index.html')
5.序列化组件
from django.core import serializers # django自带的一个小型的序列化工具 def reg(request): user_list = models.User.objects.all() # 将所有的数据都组织成一个符合json的一个个的字典 # user_l = [] # for user_obj in user_list: # user_l.append( # json.dumps({'username':user_obj.username, # 'age':user_obj.age, # 'gender':user_obj.get_gender_display() # }) # ) res = serializers.serialize('json',user_list) # return render(request,'index.html',locals())