day55 Django JsonResponse json 弹框

谁践踏了优雅 2023-06-17 06:56 10阅读 0赞

# 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\0.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组件，可以直接使用。

[1574861981968]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9naXRlZS5jb20vb2xkYm95LXB5dGhvbi1mdWxsLXN0YWNrLTI2LzE5MDgzMDI2MDIxL3Jhdy9tYXN0ZXIvd2VlazEzL2RheTU1JTIwZGphbmdvJTIwSnNvblJlc3BvbnNlJTIwanNvbiUyMCVFNSVCQyVCOSVFNiVBMSU4Ni9kYXk1NSUyMGRqYW5nbyUyMEpzb25SZXNwb25zZSUyMGpzb24lMjAlRTUlQkMlQjklRTYlQTElODYuYXNzZXRzLzE1NzQ4NjE5ODE5NjgucG5n?x-oss-process=image/format,png
[1574862327995]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9naXRlZS5jb20vb2xkYm95LXB5dGhvbi1mdWxsLXN0YWNrLTI2LzE5MDgzMDI2MDIxL3Jhdy9tYXN0ZXIvd2VlazEzL2RheTU1JTIwZGphbmdvJTIwSnNvblJlc3BvbnNlJTIwanNvbiUyMCVFNSVCQyVCOSVFNiVBMSU4Ni9kYXk1NSUyMGRqYW5nbyUyMEpzb25SZXNwb25zZSUyMGpzb24lMjAlRTUlQkMlQjklRTYlQTElODYuYXNzZXRzLzE1NzQ4NjIzMjc5OTUucG5n?x-oss-process=image/format,png