ajax_安科网

通过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>

ajax

通过ajax传文件 html页面

视图函数

bootstrap-sweetalert弹出框(ajax) html

视图函数

传json文件注意事项

相关推荐