zoukankan html css js c++ java

Django框架之序列化和上传文件

一、Django的序列化（对于ajax请求）

Django中的序列化主要应用在将数据库中检索的数据返回给客户端用户，特别的Ajax请求一般返回的为Json格式。

1）django序列化的使用方法

1、serializers
    from django.core import serializers
    ret = models.BookType.objects.all()
    data = serializers.serialize("json", ret)

2、json.dumps
    import json
    #ret = models.BookType.objects.all().values('caption')
    ret = models.BookType.objects.all().values_list('caption')
    ret=list(ret)
    result = json.dumps(ret)

3、由于json.dumps时无法处理datetime日期，所以可以通过自定义处理器来做扩展，如：
    import json 
    from datetime import date 
    from datetime import datetime 
       
    class JsonCustomEncoder(json.JSONEncoder): 
        def default(self, field): 
            if isinstance(field, datetime): 
                return o.strftime('%Y-%m-%d %H:%M:%S') 
            elif isinstance(field, date): 
                return o.strftime('%Y-%m-%d') 
            else: 
                return json.JSONEncoder.default(self, field)

序列号使用方法

2）当不使用序列化时的使用方法示例

视图函数

def xuliehua1(request):
    return render(request,'xuliehua1.html')

views.xuliehua1

对应的前端网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>用户列表</h1>
    <table id="tb">

    </table>
    <script src="/static/jquery-3.1.1.js"></script>
    <script>
        $(function() {
            initData();
        })
        function initData(){
            $.ajax({
                url:'/get_data1/',
                type:'GET',
                success:function(arg) {
                    $('#tb').append(arg);
                }
            })
        }
    </script>
</body>
</html>

xuliehua1.html

对应的ajax请求的视图函数

def get_data1(request):
    user_list = models.UserInfo.objects.all()
    return render(request,'get_data1.html',{'user_list':user_list})

get_data1对应返回到ajax的网页信息

{% for row in user_list %}
    <tr>
        <td>{{ row.id }}</td>
        <td>{{ row.username }}</td>
        <td>{{ row.email }}</td>
    </tr>
{% endfor %}

ajax=> '/get_data1/',

url(r'^xuliehua1/',  v3.xuliehua1),
url(r'^get_data1/',  v3.get_data1),

显示结果

如果返回的数据特别大，这种方式就会出现问题

3）django的序列化serializers，序列化QuesySet的对象

视图函数对应

def xuliehua2(request):
    return render(request,'xuliehua2.html')

def get_data2(request):
    from django.core import serializers
    ret = {'status':True,'data':None}
    try:
        user_list = models.UserInfo.objects.all()
        # user_list是django的 QuesySet 的对象[obj,obj,obj]，序列化只能serializers
        ret['data'] = serializers.serialize("json",user_list)
    except Exception as e:
        ret['status'] = False
    result = json.dumps(ret)
    return HttpResponse(result)

xuliehua2 and get_data2

对应的前端网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>用户列表</h1>
    <table id="tb">

    </table>
    <script src="/static/jquery-3.1.1.js"></script>
    <script>
        $(function() {
            initData();
        })
        function initData(){
            $.ajax({
                url:'/get_data2/',
                type:'GET',
                dataType:'JSON',
                success:function(arg) {
                    if(arg.status){
                        var v = JSON.parse(arg.data)
                        console.log(v)
                    }
                }
            })
        }
    </script>
</body>
</html>

xuliehua2.html

4）json序列化方式

def xuliehua3(request):
    return render(request,'xuliehua3.html')

def get_data3(request):
    ret = {'status':True,'data':None}
    try:
        user_list = models.UserInfo.objects.all().values('id','username')
        # values 和 values_list一样的
        ret['data'] = list(user_list)
    except Exception as e:
        ret['status'] = False
    result = json.dumps(ret)
    return HttpResponse(result)

xuliehua3 and get_data3

对应的前端网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>用户列表</h1>
    <table id="tb">

    </table>
    <script src="/static/jquery-3.1.1.js"></script>
    <script>
        $(function() {
            initData();
        })
        function initData(){
            $.ajax({
                url:'/get_data3/',
                type:'GET',
                dataType:'JSON',
                success:function(arg) {
                    if(arg.status){
                        console.log(arg.data)
                    }
                }
            })
        }
    </script>
</body>
</html>

xuliehua3.html

二、上传文件

1）实现上传文件

html文件编写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/upload.html" method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="text" name="user">
    <input type="file" name="img">
    <input type="submit" value="提交">
</form>
</body>
</html>

upload.html

视图函数编写

def upload(request):
    if request.method == 'GET':
        return render(request,'upload.html')
    else:
        user = request.POST.get('user')
        img  = request.FILES.get('img')
        # img是对象（文件大小，文件名称,文件内容。。。）
        print(img.name)
        print(img.size)
        f = open(img.name,'wb')
        for line in img.chunks():
            f.write(line)
        f.close()
        return HttpResponse('...')

Views.upload

2）优化装饰上传文件的html文件。上传按钮隐藏，其他标签覆盖在上传按钮上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="/upload.html" method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        <input type="text" name="user" />
        <div style="position: relative">
            <a>NB上传</a>
            <input type="file" name="img" style="opacity: 0;position:absolute;top:0;left: 0;" />
        </div>
        <input type="submit" value="提交" />
    </form>
</body>
</html>

优化upload.html

3）基于form 做上传

from django import forms
from django.forms import fields
class UploadForm(forms.Form):
    user = fields.CharField()
    img = fields.FileField()

def upload(request):
    if request.method == 'GET':
        return render(request,'upload.html')
    else:
        obj = UploadForm(request.POST,request.FILES)
        if obj.is_valid():
            user = obj.cleaned_data['user']
            img = obj.cleaned_data['img']
            # img是对象（文件大小，文件名称,文件内容。。。）
            print(img.name)
            print(img.size)
            f = open(img.name,'wb')
            for line in img.chunks():
                f.write(line)
            f.close()
            return HttpResponse('...')

view.form验证上传

4）Iframe+Form，实现上传文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .btn{
            display: inline-block;
            padding: 5px 10px;
            background-color: coral;
            color: white;
        }
    </style>
</head>
<body>

    <iframe style="display: none" id="iframe1" name="ifra1"></iframe>
    <form id="fm1" action="/upload_img.html" method="POST" enctype="multipart/form-data" target="ifra1">
        <input type="file" name="k3" onchange="uploadFile();" />
    </form>
    <h3>预览</h3>
    <div id="preview">
    </div>
    <script src="/static/js/jquery-3.1.1.js"></script>
    <script>

        function uploadFile() {
            document.getElementById('iframe1').onload = reloadIframe1;
            document.getElementById('fm1').submit();
        }
        function reloadIframe1() {
            var content = this.contentWindow.document.body.innerHTML;
            var obj = JSON.parse(content);

            var tag = document.createElement('img');
            tag.src = obj.data;
            $('#preview').empty().append(tag);
        }
    </script>
</body>
</html>

upload.html

路由分发

url(r'^upload.html$', views.upload),
url(r'^upload_img.html$', views.upload_img),

urls分发

视图函数

def upload(request):
    return render(request,'upload.html')


def upload_img(request):
    import os
    import uuid

    nid = str(uuid.uuid4())
    ret = {'status':True,'data':None,'message':None}
    obj = request.FILES.get('k3')

    file_path = os.path.join('static', nid+obj.name)
    f = open(file_path,'wb')
    for line in obj.chunks():
        f.write(line)
    f.close()
    ret['data'] = file_path
    return HttpResponse(json.dumps(ret))

views.upload

查看全文

相关阅读:
又学到的2个小技巧
 CSS3 简写animation
CSS3 区别Transform,Transition,Animation一句话
 纠错【2012年5月9日 JQuery跑马灯（文字无缝向上翻动）（自已封装的第三个插件）】
jQuery计算选中的文本字数,并弹出一个层（插件四）
html5Canvas绘制线条closePath();
html5循环方式绘制矩形
 jQuery过滤not()与filter();
javascript在firebug调试时用console.log
jQuery插件在光标定位的地方插入文字(插件5)

原文地址：https://www.cnblogs.com/linu/p/9582195.html