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

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

1）django序列化的使用方法

、serializers

    from django.core import serializers

    ret = models.BookType.objects.all()

    data = serializers.serialize("json", ret)

、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)

、由于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

 

Django框架之序列化和上传文件的更多相关文章

  1. Ajax上传数据和上传文件（三种方式）

    Ajax向后端发送数据可以有三种方式:原生Ajax方式,jQuery Ajax方式,iframe+form 方式(伪造Ajax方式) <!DOCTYPE html> <html la ...

  2. [实战]MVC5+EF6+MySql企业网盘实战(12)——新建文件夹和上传文件

    写在前面 之前的上传文件的功能,只能上传到根目录,前两篇文章实现了新建文件夹的功能,则这里对上传文件的功能进行适配. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战] ...

  3. Django积木块三——静态文件和上传文件

    静态文件和上传的文件 # 静态文件 STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join(BASE_DIR, 'static'), ) # ...

  4. 【django】ajax，上传文件，图片预览

    1.ajax 概述: AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味 ...

  5. Django框架、HTTP协议、文件配置、路由设置、

    1.socket服务端.py import socketsk = socket.socket()sk.bind(("127.0.0.1",8000))sk.listen()whil ...

  6. 找呀志_通过开源框架引AsyncHttpClient上传文件

    一个.步骤: 1.加入权限(接入网络和可写) 2.获取上传文件的路径和推断是空的 3.如果为空.创建一个异步请求对象 4.创建上传文件路径 5.跑post请求(指定url路径.封装上传參数.新建Asy ...

  7. 使用MFC提供的Http类下载和上传文件

    1.下载文件 Download(const CString& strFileURLInServer, //待下载文件的URL const CString & strFileLocalF ...

  8. 使用libcurl POST数据和上传文件

    为了具有通用性,将文件的内容读到了fc变量中,fclen是fc的长度.fc也可以是任何其它内容.curl 是 libcurl句柄.演示省略了很多显而易见的步骤.   1. 普通的post请求,这里用c ...

  9. 2.3 利用FTP服务器下载和上传文件

    二.利用FTP服务器的下载文件 from ftplib import FTP from os.path import exists def getfile(file,site,dir,user=(), ...

随机推荐

  1. PHPWAMP集成环境配置ssl证书

    和apache配置ssl证书流程一样, LoadModule socache_shmcb_module modules/mod_socache_shmcb.so LoadModule ssl_modu ...

  2. pm2-zabbix 安装与配置

    官方GITHUB路径 https://github.com/greatcare/pm2-zabbix 环境要求,zabbix-agent zabbix-sender需要安装 npm安装要求 npm i ...

  3. python中matplotlib所绘制的图包含了很多的对象

    上图中的top=‘off’意思是说顶部的grid lines 看不见. 去除frame,意思就是将这个矩形给去除掉,spine意思是脊柱 bars = plt.bar(pos, popularity, ...

  4. Zabbix 3.0编译安装

    环境准备Centos 6.X 数据库准备默认centos yum源中mysql包的版本号为5.1,为了能使zabbix 3.0能达到最好的性能效果,安装最新版的mysql数据库. yum list i ...

  5. TOJ5398: 签到大富翁（简单模拟） and TOJ 5395: 大于中值的边界元素（数组的应用）

    Python代码!!! 5395 传送门:http://acm.tzc.edu.cn/acmhome/problemdetail.do?&method=showdetail&id=53 ...

  6. pep8 && pep20

    pep8(部分,遇到问题再补充) 1.不建议使用tab键来空格,避免不必要的空格.操作符左右各加一个空格,函数默认参数使用的赋值符左右省略空格. 2.类和top-level函数定义之间空两行:类中的方 ...

  7. JavaScript各种继承方式（二）：借用构造函数继承（constructor stealing）

    一 原理 在子类的构造函数中,通过call ( ) 或 apply ( ) 的形式,调用父类的构造函数来实现继承. function Fruit(name){ this.name = name; th ...

  8. vue项目引入FastClick组件解决IOS系统下h5页面中的按钮点击延迟，连续点击无反应的问题

    异常描述: ios系统手机中访问h5页面,按钮点击有延迟,连续点击卡顿.无反应. 异常原因: 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设 ...

  9. Java-排序算法-插入排序

    一.插入排序的原理 将一个记录插入到一个已经排好序的有序表中,从而得到一个新的,记录数增1的新的有序表.从第一个元素开始,先将第一个元素看做一个排好序的子序列,然后从第二个元素开始起,对第二个元素进行 ...

  10. 微信小程序填坑之路

    图片处理 三个小方法仅供参考1.将图片转成base64编码,可以使用代码来转换,当然我才不愿意特意写代码转,我懒,献上一个在线图片转base64的地址:http://tool.css-js.com/b ...