今日内容概要
- 前后端传输数据的编码格式
- ajax提交json格式的数据
- ajax提交文件数据
- ajax结合layer弹窗实现删除的二次确认
- django自带的序列化组件(Serializers)
- 批量插入数据
今日内容详细
前后端传输数据的编码格式-- Content-Type
1.前后端传输数据的编码格式(3种):
1.urlencoded
2.form-data
3. json
2.我们只研究post请求的编码格式，因为get请求传输数据的格式直接是：url？k=v&k=v
3.form表单它只能够传输urlencoded、form-data格式的数据；json格式的数据form表单是没有办法提交的
4.能够提交json格式的数据的方式：
1.ajax
2.第三方工具：postman
5. form表单提交数据的编码格式
1.form表单默认提交数据的编码格式：urlencoded；
2.验证：在Request Headers里
Content-Type: application/x-www-form-urlencoded
ps:对于urlencoded格式的数据，django后端都会封装到request.POST中去，数据格式：username=nana&password=qwe(payload中查看)
6.form表单提交文件数据格式：form-data，其既可以提交文件数据，也可以提交普通数据格式
1.改数据格式 enctype="multipart/form-data"
2.form表单提交文件数据格式：form-data
3.验证：在Request Headers里
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary89rJVxEJi3V8oHXH
ps：后面是二进制数据
7.针对form-data格式的数据，django后端会把普通数据还是封装到rquest.POST中，对于文件数据封装到了request.FILES中了
eg:<MultiValueDict: {'myfile': [<InMemoryUploadedFile: 创建项目1.png (image/png)>]}>
8.研究ajax
1.默认的提交格式：urlencoded
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
2.django后端也是把普通数据封装到了request.POST中
ajax提交json格式的数据
1.ajax要想提交json格式的数据，必须满足两个条件:
1.content-type必须是：json （因为默认是urlencoded）
2.传输的数据必须是json格式的
2.如何更改contentType
参数：contentType:'application/json'
检验：在Request Headers里
Content-Type: application/json
3.json格式--序列化
data:JSON.stringify()
4.ajax提交的json格式数据,django后端没有把数据封装到request.POST中
5.如何获取ajax提交的json格式数据?
Django后端使用request.body
request.body----->b'{"a":1,"b":1,"c":2}'----->二进制
需求：将后端接收到的数据变为字典格式---解码，反序列化 --->可以直接反序列化json.loads()
eg:
bytes_data= request.body
str_data = bytes_data.decode('utf-8')
dic_data = json.loads(str_data)
print(dic_data,type(dic_data))
bytes_data= request.body
dic_data = json.loads(bytes_data)
print(dic_data,type(dic_data))
ps:针对ajax提交的json格式数据，django后端没有做任何的封装，纯原生数据，在request.body中，需要我们自己手动处理数据格式
6.总结：
1.第一步：更改contentType
2.数据变为json格式：序列化
<script>
$(".btn").click(function (){
$.ajax({
url:'',
type:'post',
data:JSON.stringify({'a':1, 'b':1, c:2}),
contentType:'application/json',
success:function (){
}
})
})
</script>
ajax提交文件数据
1. .val() 获取普通数据
[0].files[0] 获取文件数据
eg:
var username = $("#username").val();
var password = $("#password").val();
var myfile = $("#myfile")[0].files[0];
2.ajax提交文件数据，需要借助于form-data()
1.var myFormDataObj = new FormData()
2.myFormDataObj.append(k,v)
3.需要加两个参数
contentType:false--->告诉浏览器不要修改任何的编码格式
processData:false--->告诉浏览器不要对数据进行任何的修改或者干扰
3.后端接收数据:request.POST request.FILES
4.总结：
1.ajax提交文件数据，需要借助于form-data()
var myFormDataObj = new FormData()
2.获取数据，然后添加到myFormDataObj
myFormDataObj.append('password', password);
myFormDataObj.append('myfile', myfile);
3.修改参数
contentType:false
processData:false
4.在django后端，普通数据还是在request.POST中，文件数据在request.FILES里面
print(request.POST) # <QueryDict: {'username': ['nana'], 'password': ['123']}>
print(request.FILES) # <MultiValueDict: {'file': [<InMemoryUploadedFile: wsgi.png (image/png)>]}>
<script>
$(".btn").click(function () {
// 1.获取数据
var username = $('#username').val();
var password = $('#password').val();
var file = $('#file')[0].files[0];
{#console.log(file)#}
//2.提交数据，需要借助于form-data
var myFormDataObj = new FormData();
myFormDataObj.append('username', username)
myFormDataObj.append('password', password)
myFormDataObj.append('file', file)
$.ajax({
url: '',
type: 'post',
data: myFormDataObj,
//3.添加参数
contentType:false,
processData: false,
success: function () {
}
})
})
</script>
ajax结合layer弹窗实现删除的二次确认
1.学会如何使用第三方工具---->看文档，根据文档把工具学会使用
eg:layui:
https://layuiweb.com/demo/layer.html
https://layuiweb.com/layer/index.htm
2.下载--解压layer.js---配置文件添加：STATICFILES_DIRS
3.验证是否引入成功：layer.msg('hha')
4.点击事件----cv代码
"""
//询问框
layer.confirm('您是如何看待前端开发？', {
btn: ['重要','奇葩'] //按钮
}, function(){
layer.msg('的确很重要', {icon: 1});
}, function(){
layer.msg('也可以这样', {
time: 20000, //20s后自动关闭
btn: ['明白了', '知道了']
});
});
"""
5.ajax---hidden属性：获取值
<input type="hidden" value="1" id="d1">
var id = $("#d1").val();
data:{id:id}
6.删除操作---状态码
back_dic = {'code': 200, 'msg': '删除成功'}
7.补充：
beforeSend函数：没有返回前会出现前出现一个转动的loading小图标或者“内容加载中..”，用来告知用户正在请求数据。这个就可以用beforeSend方法来实现
ab_layer.html
<body>
<input type="hidden" value="3" id="d1">
<button class="btn">删除</button>
<script>
$('.btn').click(function () {
var id = $("#d1").val();
var index = null;
//询问框
layer.confirm('确定删除吗？', {
btn: ['确定'] //按钮
}, function () {
//删除操作
$.ajax({
url: '/delete/',
type: 'post',
data: {id: id},
beforeSend: function () {
//loading层
index = layer.load(1, {
shade: [0.1, '#fff'] //0.1透明度的白色背景
});
},
success: function (res) {
layer.close(index)
if (res.code == 200) {
layer.msg(res.msg)
}
}
})
l
});
})
</script>
</body>
Views.py
def ab_layer(request):
return render(request,'ab_layer.html')
from app01 import models
from django.http import JsonResponse
import time
def delete(request):
print(request.POST)
id = request.POST.get('id')
time.sleep(5)
models.Book.objects.filter(pk= id).delete()
back_dic = {'code': 200, 'msg': '删除成功'}
return JsonResponse(back_dic)
django自带的序列化组件
1.需求：从数据库中查询几条数据，序列化给到前端，以列表套字典的形式
1.方式一：for循环添加
def show_data(request):
user_list = models.Book.objects.all()
l1 = []
for user_obj in user_list:
dic = {
'name':user_obj.username
}
l1.append(dic)
return JsonResponse(l1,safe=False)
2.方式二：序列化组件(需要到模块-from django.core import serializers)
---json.cn解析
from django.core import serializers
def show_data(request):
user_list = models.Book.objects.all()
l1 = serializers.serialize('json',user_list)
return JsonResponse(l1,safe=False)
2.以后项目是前后端分离的项目，没有办法使用django模版语法，那后端的数据如何给到前端？
django可以写一个借口，最终给前端的数据格式就是呗序列化后的数据
批量插入数据
1.需求：book表插入10000条数据
1.for循环插入数据
for i in range(100000):
models.Book.objects.create(username='%s'%i)
ps:运行特别慢，其原因是不停地对数据库进行orm操作
2.批量插入数据：bulk_create()
book_list = []
for i in range(10000):
book_obj =models.Book(username='%s'%i)
book_list.append(book_obj)
models.Book.objects.bulk_create(book_list)
底层原理:一次插入多条数据 insert into table (username) values(1,'kevin'),(1,'kevin'),(1,'kevin')，(1,'kevin')，(1,'kevin')，(1,'kevin')
2.分页
第一页：select * from app01 limit 1,500
第二页：select * from app01 limit 501,1000
第三页：select * from app01 limit 1001,1500
最后一页：select * from app01 limit 99501,100000 ==>select * from user---查了前面多有数据，再丢弃
3.不管数据有多大，只要不去查库，效率都可以忽略，
以后再实际项目中，能够一次操作数据库完成的动作，就要尽量使用一次性的
4.面试题：你对Mysql查询性能优化有什么好的见解
