Fifty Ajax/小案例/登陆及图书馆模型

1、Ajax 实现 一个计算案例

# 注意事项：1、注释setting 里 MIDDLEWARE的 'django.middleware.csrf.CsrfViewMiddleware'

2、form 表单实现上传文件

# HTML
<form action="/upload_file/" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="file" name="file_name">
    <input type="submit">
</form>
# type指定为file，增加enctype

# views
def upload_file(request):
    file_obj = request.FILES.get("file_name")
    with open(os.path.join('medio', file_obj.name), "wb") as f:
        for line in file_obj:
            f.write(line)
    return HttpResponse('okokokko!')

3、基于Ajax 实现上传文件

# HTML
<h3>基于Ajax上传文件</h3>

<form>
    <input type="file" class="file_name">
{#不能用submit属性， 否则会跳转页面就没意义了#}
    <input type="button" class="file_btn" value="ajax提交">
</form>
<script>
    $(".file_btn").click(function () {
        let formdata = new FormData();
        // 把数据放入容器 FormData重。
        formdata.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val());
        formdata.append("file_name", $(".file_name")[0].files[0]);
        $.ajax({
            url: "/upload_file/",
            type: "post",
            processData: false,  // 告诉jQuery不要去处理发送的数据
            contentType: false,  // 告诉jQuery不要去设置Content-Type请求头
            data: formdata,
            success:function (data) {
                alert(data)
            }
        })
    })
</script>

# view
def upload_file(request):
    file_obj = request.FILES.get("file_name")
    with open(os.path.join('medio', file_obj.name), "wb") as f:
        for line in file_obj:
            f.write(line)
    return HttpResponse('okokokko!')

 4、关于Ajax和form上传的原理，是字节流还是path，待续...