通过ajax传文件 html页面
<body>
<input type="text" name="username" id="t1">
<input type="text" name="password" id="t2">
<input type="file" name="myfile" id="t3">
<button id="b1">提交</button>
<script>
$('#b1').click(function () {
// 1.先生成一个formdata对象
var myFormData = new FormData();
// 2.朝对象中添加普通的键值
myFormData.append('username',$("#t1").val());
myFormData.append('password',$("#t2").val());
// 3.朝对象中添加文件数据
// 1.先通过jquery查找到该标签
// 2.将jquery对象转换成原生的js对象
// 3.利用原生js对象的方法 直接获取文件内容
myFormData.append('myfile',$('#t3')[0].files[0]);//列表套字典对象 字典对象值是也是列表 [ {files:[二进制文件数据,]},{},{} ]
$.ajax({
url:'',
type:'post',
data:myFormData, // 直接丢对象
// ajax传文件 一定要指定两个关键性的参数
contentType:false, // 不用任何编码 因为formdata对象自带编码 django能够识别该对象
processData:false, // 告诉浏览器不要处理我的数据 直接发就行
success:function (data) {
alert(data)
}
})
})
</script>
</body>
视图函数
def upload(request):
if request.is_ajax():
if request.method == 'POST':
file_obj = request.FILES.get('myfile')
with open('xxx.jpg','wb') as f:
for line in file_obj:
f.write(line)
return HttpResponse('收到啦 dsb')
return render(request,'upload.html')
bootstrap-sweetalert弹出框(ajax) html
<a href="#" class="btn btn-danger btn-sm cancel" delete_id="{{ user_obj.pk }}">删除</a>
<script>
$('.cancel').click(function () {
console.log('1111');
var $btn = $(this);
swal({
title: "你确定要删吗?",
text: "你要是删了,你就准备好跑路吧!",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "对,老子就要删!",
cancelButtonText: "算了,算了!",
closeOnConfirm: false,
showLoaderOnConfirm: true
},
function(){
$.ajax({
url:'',
type:'post',
data:{'delete_id':$btn.attr('delete_id')},
success:function (data) {
if (data.code==1000){ //后端验证码code
swal(data.msg, "你可以回去收拾行李跑路了.", "success");
// 1.直接刷新页面
{#window.location.reload()#}
// 2.通过DOM操作 实时删除
$btn.parent().parent().remove()
}else{
swal("发生了未知错误!", "我也不知道哪里错了.", "info");
}
}
});
});
})
</script>
视图函数
def sweetajax(request):
print(request.method)
print(request.is_ajax())
if request.method == 'POST':
back_dic = {"code":1000,'msg':''}
delete_id = request.POST.get('delete_id')
models.Userinfo.objects.filter(pk=delete_id).delete()
back_dic['msg'] = '后端传来的:真的被我删了'
time.sleep(3)
return JsonResponse(back_dic)
user_queryset = models.Userinfo.objects.all()
return render(request,'sa.html',locals())
传json文件注意事项
<script>
$('#b1').on('click',function () {
// 朝后端提交post数据
$.ajax({
// 1.到底朝后端哪个地址发数据
url:'', // 专门用来控制朝后端提交数据的地址 不写默认就是朝当前地址提交
// 2.到底发送什么请求
type:'post', // 专门制定ajax发送的请求方式
// 告诉后端你当前的数据格式 到底是什么类型
{#contentType:'application/json',#}
contentType:'application/json',
// 3.发送的数据到底是什么
{#data:{'t1':$('#t1').val(),'t2':$('#t2').val()},#}
{#data:JSON.stringify({'username':'jason','password':'123'}),#}
data:JSON.stringify({'username':'asd','password':'123'}),
// 4.异步提交的任务 需要通过回调函数来处理
success:function (data) { // data形参指代的就是异步提交的返回结果
// 通过DOM操作将内容 渲染到标签内容上
{#$('#t3').val(data)#}
alert(data); // usernamepassword
}
})
})
</script>
