day54 Django ajax和form表单上传文件

约定不等于承诺〃 2023-06-17 05:58 1阅读 0赞

# day54 Django ajax和form表单上传文件 #

## ajax ##

### 特点 ###

1.  局部刷新
2.  异步请求

### 写法 ###

{% load static %}
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    
    <h1>登录页面</h1>
    {##}
    {#<form action="" method="post">#}
    {#    {% csrf_token %}#}
    {#    用户名: <input type="text" name="username">#}
    {#    密码: <input type="text" name="password">#}
    {#    <input type="submit">#}
    {#</form>#}
    
    {% csrf_token %}
    <hr>
    用户名: <input type="text" id="uname">
    密码: <input type="password" id="pwd">
    <button id="sub">提交</button>
    <span id="error" style="color:red;font-size: 12px;"></span>
    </body>
    
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    {#<script src="{% static 'js/xx.js' %}"></script>#}
    <script>
        $('#sub').click(function () {
         
    
            var uname = $('#uname').val();
            var pwd = $('#pwd').val();
            var xxx = $('[name="csrfmiddlewaretoken"]').val();
    
            $.ajax({
         
                url:'{% url "login" %}',请求路径
                type:'post',  #请求方法
                data:{
         'uname':uname,'pwd':pwd,'csrfmiddlewaretoken':xxx}, 请求数据,不需要携带数据的请求,不需要写data参数
                success:function (res) {
         
                    console.log('>>>>',res); #res参数拿到的是响应数据
                    if (res !== 'ok'){
         
                        $('#error').text('用户名或者密码有误!')
                    }else {
         
                        location.href='/home/';
                    }
                }
            })
        })
    
    </script>
    
    </html>

### ajax通过csrf\_token认证 ###

#### 方式1 ####

通过找到csrf逻辑经过模板渲染后生成的input标签，获取到csrf token 的值。

##### hmtl代码 #####

Ajax可以直接提交数据，所以不需要将input标签包裹在form标签之中。

{% csrf_token %} 
    用户名: <input type="text" id="uname">
    密码: <input type="password" id="pwd">
    <button id="sub">提交</button>

##### js代码 #####

$('#sub').click(function () {
        
    
        var uname = $('#uname').val();
        var pwd = $('#pwd').val();
        // 获取到{% csrf_token %}这个模板渲染语法渲染之后的input标签对应的值
        var xxx = $('[name="csrfmiddlewaretoken"]').val();
    
        $.ajax({
        
            url:'{% url "login" %}',  // 127.0.0.1:8000/login/
            type:'post',
            // 给post请求提交的数据中添加上csrf_token认证所需要的键值对
            data:{
        'uname':uname,'pwd':pwd,'csrfmiddlewaretoken':xxx},
               success:function (res) {
        
            console.log('>>>>',res);
            if (res !== 'ok'){
        
                $('#error').text('用户名或者密码有误!')
    
            }else {
        
                location.href='/home/';
            }
        }
    })
    })

#### 方式2 ####

data数据部分的csrf\_token认证的键值对的值直接写`{ { csrf_token }}`，经过模板渲染之后，它直接就是那个input标签的value值。

##### html代码 #####

同样，不需要将input标签包裹在form标签中。

用户名: <input type="text" id="uname">
    密码: <input type="password" id="pwd">
    <button id="sub">提交</button>

##### js代码 #####

$('#sub').click(function () {
        
    
        var uname = $('#uname').val();
        var pwd = $('#pwd').val();
    
        $.ajax({
        
            url:'{% url "login" %}',  // 127.0.0.1:8000/login/
            type:'post',
            // 需要注意的是：经过模板渲染后的内容时不会带引号的，需要我们手动给csrf token加引号，表示这是一个字符串，否则将会按照变量来解析，从而出错。
            data:{
        'uname':uname,'pwd':pwd,'csrfmiddlewaretoken':'{
        { csrf_token }}'},
            success:function (res) {
        
                console.log('>>>>',res);
                if (res !== 'ok'){
        
                    $('#error').text('用户名或者密码有误!')
                }else {
        
                    location.href='/home/';
                }
            }
        })
    })

### form表单上传文件 ###

在默认情况下，form 表单是无法传输文件的。即便我们在 HTML 中写了 type 类型为 file 的 input 标签。这是因为 HTML 默认的表单传输方法为 `application/x-www-form-urlencoded`。但是这种方法是不能传输文件的。用这种方法传输文件时，我们只能在后端看到文件名，而得不到整个文件。

Views 视图函数尝试打印获取到的文件和 POST 数据时，结果如下：

<MultiValueDict: {
        }>
    <QueryDict: {
        'csrfmiddlewaretoken': ['jEKPQOvvCeD4q96ET9zVU5xBTdlgmbgPQb7c5EhvNsrYdT8L4KBw8IuBTmlFOUwj'], 'avata': ['1571311850334.png']}>

这时，我们就要将HTML代码中的 form 表单标签加上 `enctype="multipart/form-data"` 的属性要写才能上传文件，其本质时修改 content-type 请求头中的携带数据的消息格式：

<form action="" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        用户名:<input type="text" name="username">
        头像: <input type="file" name="file_obj">
        <input type="submit">
    </form>

views 视图函数写法：

def upload(request):
        if request.method == 'GET':
            return render(request,'upload.html')
        else:
            print(request.POST)
            print(request.FILES)
            file_obj = request.FILES.get('file_obj')    # FILES 是一个类似于字典的对象，file_obj（也就是HTML文件input标签中的name属性值）对应的值才是文件对象
            print(file_obj.name)
            with open(file_obj.name,'wb') as f:
                # for i in file_obj:
                #     f.write(i)
                for i in file_obj.chunks():  #65536字节
                    f.write(i)
                    return HttpResponse('ok')

当设置好 form 标签的 enctype 属性后，文件就会顺利传到视图函数中了：

<MultiValueDict: {
        'avata': [<InMemoryUploadedFile: 1571311850334.png (image/png)>]}>
    <QueryDict: {
        'csrfmiddlewaretoken': ['QTtPqw8y7nldamyW4uZzY6m5yzHglvGMnqQcFmUyiB97X6A3f51acJj5yIHFNeWg']}>

得到的 `file_obj` 是一个文件对象，与文件句柄类似。我们可以通过直接 for 循环文件句柄的方式，将文件逐行写入本地。但是如果文件的每一行都比较长，比如图片之类的媒体文件，或许只有一行，如果我们还使用逐行写入的话，会占用很多的内存资源。于是更推荐使用 for 循环 `file_obj.chunks()` ，这样每次只会循环 65536 个字节的内容，从而缓解内存的压力。