django框架——ajax 请求
ajax请求
异步提交 局部刷新
发送请求的方式
1.浏览器地址栏输入url GET请求
2.a标签href属性 GET请求
3.form表单 GET请求/POST请求
4.ajax GET请求/POST请求
ajax发送普通数据
$('#btn').click(function () {
$.ajax({
url:'',
type:'post',
data:{'i1':$('#d1').val(),'i2':$('#d2').val()},
success:function (args) {
$('#d3').val(args)
}
})
})
后端是用HttpResponse返回的数据 回调函数不会自动反序列化
后端用的是JsonResponse返回的数据 回调函数会自动反序列化
HttpResponse解决方式
1.在前端利用JSON.parse()
2.在ajax里面配置一个参数
ajax里加dataType:'json'
前后端传输数据的编码格式(contentType)
urlencoded
formdata
json
form表单
默认的数据编码格式是urlencoded
formdata
form表单是不能发送json格式数据
ajax
默认的编码格式urlencoded
post,json
ajax发送json格式数据
ajax发送json格式数据需要注意点
1.contentType参数指定成:application/json
2.发送的数据一定是json格式，对应
3.django后端不会处理json格式数据 要从request.body获取并处理
request.is_ajax()
判断是否是ajax请求
<script>
$('#d1').click(function () {
$.ajax({
url:'',
type:'post',
data:JSON.stringify({'username':'jason','age':25}),
contentType:'application/json', // 指定编码格式
success:function (视图函数的返回值) {
回调函数
}
})
})
</script>
json_bytes = request.body
json_str = json_bytes.decode('utf-8')
json_dict = json.loads(json_str)
# json.loads自动解码反序列化 跟Python解释器版本有关，3.5 还不行
json_dict = json.loads(json_bytes)
ajax发送文件
ajax发送文件需要借助于js内置对象FormData
<script>
$('#d4').on('click',function () {
let formDateObj = new FormData();
formDateObj.append('username',$('#d1').val());
formDateObj.append('password',$('#d2').val());
formDateObj.append('myfile',$('#d3')[0].files[0])
$.ajax({
url:'',
type:'post',
data:formDateObj,
contentType:false, // 不需使用任何编码 django后端能够自动识别formdata对象
processData:false, // 告诉浏览器不要对数据进行任何处理
success:function (args) {
}
})
})
</script>
序列化器
需求:在前端获取到后端用户表里面所有的数据 并且要是列表套字典
import json
from django.http import JsonResponse
from django.core import serializers
def ab_ser(request):
user_queryset = models.User.objects.all()
# 自己凑出来
user_list = []
for user_obj in user_queryset:
tmp = {
'pk':user_obj.pk,
'username':user_obj.username,
'age':user_obj.age,
'gender':user_obj.get_gender_display()
}
user_list.append(tmp)
return JsonResponse(user_list,safe=False)
自己形成列表的数据
[
{"pk": 1, "username": "jason", "age": 25, "gender": "male"},
{"pk": 2, "username": "egon", "age": 31, "gender": "female"},
{"pk": 3, "username": "kevin", "age": 32, "gender": "others"},
{"pk": 4, "username": "tank", "age": 40, "gender": 4}
]
# 序列化
res = serializers.serialize('json',user_queryset)
return HttpResponse(res)
序列化组件serializers形成的数据
[
{ "model": "app01.user",
"pk": 1,
"fields": {"username": "jason", "age": 25, "gender": 1}},
{ "model": "app01.user",
"pk": 2,
"fields": {"username": "egon", "age": 31, "gender": 2}},
{ "model": "app01.user",
"pk": 3,
"fields": {"username": "kevin", "age": 32, "gender": 3}},
{ "model": "app01.user",
"pk": 4,
"fields": {"username": "tank", "age": 40, "gender": 4}}
]
ajax结合sweetalert
<script>
$('.del').on('click',function () {
// 先将当前标签对象存储起来
let currentBtn = $(this);
// 二次确认弹框
swal({
},
function(isConfirm) {
if (isConfirm) {
// 朝后端发送ajax请求删除数据之后 再弹下面的提示框
$.ajax({
url:'/delete/user/' + currentBtn.attr('delete_id'),
传递主键值方式1
url:'/delete/user/', // 2 放在请求体里面
type:'post',
data:{'delete_id':currentBtn.attr('delete_id')},
success:function (args) {
// args = {'code':'','msg':''}
// 判断响应状态码 然后做不同的处理
if(args.code === 1000){
swal("删了!", args.msg, "success");
// 1.lowb版本 直接刷新当前页面
window.location.reload()
// 2.利用DOM操作 动态刷新
currentBtn.parent().parent().remove()
}else{
swal('完了','出现了位置的错误','info')
}
}
})
} else {
swal("怂逼", "不要说我认识你", "error");
}
});
})
</script>
批量插入
# 批量插入
book_list = []
for i in range(100000):
book_obj = models.Book(title='第%s本书'%i)
book_list.append(book_obj)
models.Book.objects.bulk_create(book_list)
