Ajax 与文件上传

一 Ajax篇

1 ajax简介（Asynchronous Javascript And XML）

　　异步,Js,XML,即使用Javascript语言与服务器进行异步交互,传输的数据为xml(可扩展标记语言),

2 两个特点

　　2.1 异步交互

　　客服端发出一个请求,无需等待这个请求的响应,就可以发送第二个请求.

　　2.2 局部更新

　　不会造成网页的覆盖,仅仅是通过jquery的dom操作,使得页面局部发生数据变化.

3 执行流程

4 基于Jquery 的ajax实现(加法计算器)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

</head>

<body>

<input type="text" class="num1">+<input type="text" class="num2">=<input type="text" class="result"><input type="button" class="cul" value="计算">

{% csrf_token %}

<script>

    $('.cul').click(function () {

        let num1 = $('.num1').val();

        let num2 = $('.num2').val();

        console.log(num1, num2);

        $.ajax({

            url:"/cul/",

            type:"post",

            data:{

                n1:num1,

                n2:num2,

                csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),

            },

            success:function (res) {

                console.log(res);

                $('.result').val(res);

            }

        })

    })

</script>

</body>

</html>

index.html

　　4.1 标签代码

<input type="text" class="num1">+<input type="text" class="num2">=<input type="text" class="result"><input type="button" class="cul" value="计算">

标签代码

　　4.2 url.py

    path('index/', views.index), #显示主页路由

    path('cul/', views.cul), #加法计算路由

　　4.3 views.py

def index(request):

    return render(request,'index.html')

def cul(request):

    n1=request.POST.get('n1') #获取第一个数

    n2=request.POST.get('n2') #获取第二个数

    ret=str(int(n1)+int(n2)) #加法运算

    return HttpResponse(ret) #返回结果

　　4.4 ajax 代码实现

{% csrf_token %}  #为了获取秘钥

<script>

    $('.cul').click(function () {

        let num1 = $('.num1').val(); #获取输入框的第一个参数

        let num2 = $('.num2').val(); #获取输入框的第二个参数

       #ajax 的开始

       $.ajax({

            url:"/cul/", #ajax 请求的url

            type:"post", #ajax 请求方式

            data:{ #ajax 请求的数据

                n1:num1,

                n2:num2,

                csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(), #获取秘钥

            },

            success:function (res) { #成功响应的回调函数,res为响应体内容

                console.log(res);

                $('.result').val(res);

            }

        })

    })

</script>

5 ajax请求的参数

url : 请求的路径  如 url:"/index/"

type:请求的方式 如 type:"get",

data:请求的数据, 如 data:{a:1,b:2...}

contentType:请求体的编码类型 ,仅用于post请求

processData:处理数据方式

success:成功回调函数,res响应体数据

6 ajax前后端交互推荐使用json格式的数据传输

py文件

json.dumps('字典') #把字典序列化为json字符串

json.loads('json字符串') #把json字符串反序列化为字典

html文件

JSON.stringify('obj') #把自定义对象转化为json字符串

JSON.parse('json字符串') #把字符串转换为自定义对象

JsonResponse :只需要后端使用JsonResponse传递json字符串,后端会自动反序列化赋值给res

    res={"code":200,"data":None,"msg":None}

    return JsonResponse(res)

二文件上传篇

1 请求头

　　ContentType指的是请求体的编码类型，常见的类型共有3种：

　　1 .1 application/x-www-form-urlencoded

　　最为常见的POST提交数据的方式,如果不设置enctype属性,默认的POST提交数据的方式就是application/x-www-form-urlencoded,请求头信息,如下

POST http://www.example.com HTTP/1.1

Content-Type: application/x-www-form-urlencoded;

charset=utf-8

user=yuan&age=22

　　1.2 multipart/form-data

　　form表单提交文件必须将 enctype=multipart/form-data,请求信息示例

POST http://www.example.com HTTP/1.1

Content-Type:multipart/form-data; boundary=---- WebKitFormBoundaryrGKCBY7qhFd3TrwA

#分割标识符,只要这个分割标识符一致,则说明是同一个文件

------WebKitFormBoundaryrGKCBY7qhFd3TrwA

Content-Disposition: form-data; name="user"

yuan

------WebKitFormBoundaryrGKCBY7qhFd3TrwA

Content-Disposition: form-data; name="file"; filename="chrome.png"

Content-Type: image/png

PNG ... content of chrome.png ...

------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

form-data提交文件的数据格式

　　1.3 application/json

　　form表单里面enctype=application/json,数据以json字符串方式提交,django不会解析json 字符串,需要自己反序列化

提交数据形式

'{"a":1,"b":2...}'

django解析数据

import json 

json.loads(request.Body.decode())

2 form表单提交文件

　　2.1 模板部分

<form action="" method="post" enctype="multipart/form-data">

      用户名 <input type="text" name="user">

      头像 <input type="file" name="file">

    <input type="submit">

</form>

　　2.2 视图部分

def file(request):

    print(request.POST)

    print(request.FILES)

    file_obj = request.FILES.get('file') #get('后端传入的name') 获取到文件句柄

    name=file_obj.name  #获取文件名

    #读取文件,写入文件

    with open(name,'wb')as f:

        for line in file_obj:

            f.write(line)

    return HttpResponse('上传成功')

3 基于ajax的文件上传

<h3>Ajax的文件上传</h3>

<form>

    {% csrf_token %}

    <input type="text" class="user">

    <input type="file" class="file">

    <input type="button" value="submit" class="ajax_btn2">

</form>

html代码

<script>

    $(".sub_btn").click(function () {

        let formdata=new FormData; //创建FormData对象,代表文件传输

        formdata.append("user", $('.user').val());

        formdata.append("file", $('.file')[0].files[0]);

        formdata.append("csrfmiddlewaretoken",$("[name='csrfmiddlewaretoken']").val(),)

        $.ajax({

            url:'/file/',

            type: 'post',

            processData:false, //不让指定数据处理方式

            contentType:false, //不让指定传输格式

            data:formdata,     //formdata对象自带数据处理方式和传输格式

        })

    })

</script>

ajax 实现文件上传

def put2(request):

    print(request.POST)

    print(request.FILES)

    file_obj=request.FILES.get("file")

    print(file_obj.name)

    name=file_obj.name

    with open(os.path.join("media","imgs",name),"wb") as f_w:

        for line in file_obj:

            f_w.write(line)

    return HttpResponse('上传成功!')

wiews.py 处理函数

三补充篇---Ajax 使用Json 数据格式进行数据交互

1 contentType:"json", #规定传输格式为"json"

2 data:JSON.stringify({ #传输的数据转换为json字符串数据

                a:1,

                b:2

            }),

<script>

#默认的contType: urlencoded

    $(".ajax_btn").click(function () {

        $.ajax({

            url:"/put1/",

            type:"post",

            data:{

                a:1,

                b:2

            },

            success:function (res) {

                console.log(res)

            }

        })

    })

#json字符串传输数据

     $(".ajax_btn2").click(function () {

        $.ajax({

            url:"/put1/",

            type:"post",

            contentType:"json",

            data:JSON.stringify({

                a:1,

                b:2

            }),

            success:function (res) {

                console.log(res)

            }

        })

    })

</script>

ajax 代码演示