zoukankan      html  css  js  c++  java
  • day55 Django JsonResponse json 弹框

    day55 Django JsonResponse json 弹框

    ajax上传文件

    ajax主要是 js 代码,对 HTML 的改变不大,只是实当增加一些 id 属性,以便更容易找到目标标签:

    {% csrf_token %}
    用户名:<input type="text" name="username">
    头像: <input type="file" name="file_obj">
    <input type="submit" id="btn">
    

    使用 ajax 上传文件时,需要修改一些 js 配置。首先,文件数据不能以普通的自定义对象保存,而是需要使用 new FormData 语句创建一个 form data 对象。使用 append 命令将一个个键值对插入到对象中。此外,还需要将 processData 和 contentType 的值设为 false,这时使用 ajax 上传文件的固定搭配,提示 ajax 不要对数据进行加工操作:

    $('#btn').click(function () {
        var formdata = new FormData();
        var uname = $('[name="username"]').val();
        // var file_obj = $('[name="file_obj"]').val(); //"C:fakepath.jpg" 拿到的文件的本地路径
        var f_obj = $('[name="file_obj"]')[0].files[0] ; // 这是文件对象,注意是files而不是file
    
        formdata.append('username',uname);    // 将数据添加到formdata对象中
        formdata.append('file_obj',f_obj);
        formdata.append('csrfmiddlewaretoken',$('[name="csrfmiddlewaretoken"]').val());
        $.ajax({
            url:'/upload/',
            type:'post',
            // 上传文件时的固定搭配 formdata
            processData:false,
            contentType:false,
            data:formdata,
            // data:{uname:uname,file_obj:f_obj,'csrfmiddlewaretoken':$('[name="csrfmiddlewaretoken"]').val()},
            success:function (res) {
            console.log(res)
            }
    
        })
    })
    

    至于视图函数,如果参数没有变化,可以完全不需要修改。

    JsonResponse

    json

    json,JavaScript Object Notation,JS对象标记,是一种通用性极强的轻量级数据交互格式。其基础数据格式与 Python 中的基本数据格式比较如下:

    1574861981968

    在 JSON 中,并不能表示所有的 Python 数据类型,比如,datetime 类型的数据就无法表示。我们可以通过重写 JSON 编码的方式,实现对时间的序列化:

    import json
    from datetime import datetime
    from datetime import date
    
    #对含有日期格式数据的json数据进行转换
    class JsonCustomEncoder(json.JSONEncoder):
        def default(self, field):
            if isinstance(field,datetime):
                return field.strftime('%Y-%m-%d %H:%M:%S')
            elif isinstance(field,date):
                return field.strftime('%Y-%m-%d')
            else:
                return json.JSONEncoder.default(self,field)
    
    d1 = datetime.now()
    dd = json.dumps(d1,cls=JsonCustomEncoder)
    print(dd)
    

    在JS中,同样可以使用 json。JS 与 Python 间使用 json 进行数据交互的方式为:

    1574862327995

    JsonResponse

    Django 封装了 JsonResoponse 类,将其配合 ajax 使用,可以实现传输诸如字典之类的数据:

    from django.http import JsonResponse
    def data(request):
        if request.method == 'GET':
            d1 = {'name':'chao','age':18}
            # d1_str = json.dumps(d1)
            # return HttpResponse(d1_str,content_type='application/json')
            return JsonResponse(d1)  
        	# 干了上面两步,序列化以及加content_type响应头
            # 这样,ajax在处理数据时会自动将json数据反序列化,那么
            return JsonResponse(d1,safe=False)
    

    需要注意的是,如果jsonresponse的数据不是字典,需要加上safe参数。

    我们在js中可以直接接收并使用传递过来的数据,这个res就是反序列化之后的数据了,直接可以使用:

    success:function(res){
    	console.log(res)
    } 
    

    SweetAlert

    可以在https://github.com/t4t5/sweetalert下载道SweetAlert。

    sweetalert 是一个弹窗框架,其核心部件存放在 dist 文件夹中。导入方式与 bootstrap 类似。

    $(".delete_btn").on("click", function () {
        // console.log($(this).attr('xxoo'));
        var ths = $(this);
        swal({
            title: "are you sure?",
            text: "滚!",
            type: "warning",
            showCancelButton: true,
            confirmButtonClass: "btn-danger",
            confirmButtonText: "再见",
            cancelButtonText: "容我三思",
            closeOnConfirm: false,
        },
            function () {
                // console.log($(this));
                var deleteId = ths.attr('xxoo'); // 要删除的记录的id
                console.log('>>>>>',deleteId);
                $.ajax({
                    url: "/book/swal_delete/",
                    type: "post",
                    data: {"id": deleteId},
                    success: function (data) {
                        // data --  a = {'status':1,}    a.status  a['status']
                        if (data.status === 1) {
                            swal("删除成功!", "你可以准备跑路了!", "success");
                            // location.reload();  // 刷新页面
                            ths.parent().parent().remove();
                            var tr_first_td = $('tr .first_child');
                            for (var i=0;i<tr_first_td.length;i++){
                                // i = i+1;
                                var a = i+1;
                                $('tr .first_child').eq(i).text(a);
                            }
                        } else {
                            swal("删除失败", "你可以再尝试一下!", "error");
                        }
                    }
                })
            }
        );
    })
    

    注意:this指代的是调用函数的对象。

    在https://www.jq22.com/网站中,可以找到很多很好的js组件,可以直接使用。

  • 相关阅读:
    十四、自定义构建购物计算组件&表单组件
    从微信小程序到鸿蒙js开发【04】——list组件
    HarmonyOS应用开发-Component体系介绍(一)
    HarmonyOS单模块编译与源码导读
    烧录失败导致boot无法加载的解决措施,再也不怕烧成砖了
    从微信小程序到鸿蒙js开发【03】——fetch获取数据&简单天气预报
    抛弃床的温暖,只为了它丨云库一款跑在鸿蒙系统上的应用丨篇二
    swift 弹窗
    Swift字符串常用操作总结
    swift 随机数
  • 原文地址:https://www.cnblogs.com/shuoliuchina/p/11945881.html
Copyright © 2011-2022 走看看