有关post的三种提交格式

wcqwcq

2020-07-04

关注关注

有关数据提交格式

前端

从前端往后端传数据，有三种编码方式

urlencoded：form表单的默认方式
form-data：form表单中指定enctype，传文件的方式
json：只能用ajax，指定ContenType实现

其中，ajax也支持urlencoded，是ajax的默认方式

fromdata，ajax也支持，需要new一个fromdata对象才能用

后端

request.POST：接受urlencoded和form-data的编码方式，这里才有数据

request.body：其中有json格式的编码数据，但是是bytes类型，需要用json模块反序列化一下，变成字典，才能用

并不是前两种方法不在会在request.body中，而是request.POST只接受前两种，第三种json格式必须去请求体（request.body）里面取

额外

json.loads(bytes)中，3.6以上支持loads可以直接放bytes属性的数据，3.5及以下不支持

form表单

<form action="url" name="name" method="get/post" enctype="" target="">
</form>
action：url 地址，服务器接收表单数据的地址
method：提交服务器的http方法，一般为post和get

重点属性：enctype

application/x-www-form-urlencoded，默认使用，POST请求中，请求头中的content-type指定值就是该值。

<form action="" method="post" enctype="application/x-www-form-urlencoded">
    <!--form表单发送post，需要指定method，-->
    用户名：<input type="text" name="user" id="user">
    密码：<input type="text" name="pwd" id="pwd">
    <input type="submit" value="提交">
</form>

后端在request.POST接收

multipart/form-data，指定enctype类型，才能完成传递文件数据。

<form action="" method="post" enctype="multipart/form-data">
    用户名：<input type="text" name="user" id="user">
    密码：<input type="text" name="pwd" id="pwd">
    头像：<input type="file" name="avatar" id="avatar1">
    <input type="submit" value="提交">
</form>
<button id="submit_btn">提交</button>

后端在request.POST接收，文件使用request.FIlES接收

以用户登陆的输入框为例

Ajax

application/json

hwk.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hwk</title>
    {% load static %}
    <script type="text/javascript" src="{% static ‘jQuery/jQuery-3.4.1.js‘ %}"></script>
    <!--必须先导入jQuery，才能使用ajax，django中放在static文件夹内，在settings中配置，load static导入-->
</head>
<body>
<div>
    <form action="">
        用户名：<input type="text" name="user" id="user">
        密码：<input type="text" name="pwd" id="pwd">
    </form>
    <button id="submit_btn">提交</button>
    <div>返回的数据:<p id="res"></p></div>
</div>
<script>
    $("#submit_btn").click(function () {
        // id绑定点击事件
        $.ajax({
            url: ‘‘,
            type: ‘post‘,
            contentType: ‘application/json‘,
            //一定要指定格式 contentType: ‘application/json‘，发送的才是json格式数据
            data: JSON.stringify({
                // JSON.stringify将data整体转成json格式数据
                ‘user‘: $("#user").val(),
                // id选择器，val()方法获取input框的值
                ‘pwd‘: $(‘#pwd‘).val(),
            }),
            success: function (res) {
                $(‘#res‘).text(res.user+res.pwd)
                // 请求成功回调
                console.log(res)
            }

        })
    });
</script>
</body>
</html>

views.py

from django.shortcuts import render, HttpResponse
from django.http import JsonResponse
# 导入JsonResponse
from django.views import View
# 使用CBV，必须导入View
import json

class Hwk(View):
    def get(self, request):
        return render(request, ‘hwk.html‘)

    def post(self, request):
        print(request.body)
        # ajax发送来的json数据只有从请求体request.body里拿，这一种获取方式
        dic1 = json.loads(request.body)
        # 直接拿出来的是bytes格式，要转成json，使用loads方法
        print(dic1)
        return JsonResponse(dic1)

urlencoded

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hwk</title>
    {% load static %}
    <script type="text/javascript" src="{% static ‘jQuery/jQuery-3.4.1.js‘ %}"></script>
</head>
<body>
<div>
    <form action="">
        用户名：<input type="text" name="user" id="user">
        密码：<input type="text" name="pwd" id="pwd">
    </form>
    <button id="submit_btn">提交</button>
    <div>返回的数据:<p id="res"></p></div>
</div>
<script>
    $("#submit_btn").click(function () {
        $.ajax({
            url: ‘‘,
            type: ‘post‘,
            contentType:‘application/x-www-form-urlencoded‘,
            // 指定urlencoded，其实默认的也是这个
            data:{
                // 因为不是json格式的数据，data就不需要用JSON转格式了，转了反而有问题
                ‘user‘: $("#user").val(),
                ‘pwd‘: $(‘#pwd‘).val(),
            },
            success: function (res) {
                $(‘#res‘).text(res.user+res.pwd);
                console.log(res)
            }

        })
    });
</script>
</body>
</html>

class Hwk(View):
    def get(self, request):
        return render(request, ‘hwk.html‘)

    def post(self, request):
    # 接收数据使用request.POST，是一个QuerySet字典
        print(request.POST)
        dic1 = request.POST
        return JsonResponse(dic1)

form-data

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hwk</title>
    {% load static %}
    <script type="text/javascript" src="{% static ‘jQuery/jQuery-3.4.1.js‘ %}"></script>
</head>
<body>
<div>
    <form action="">
        用户名：<input type="text" name="user" id="user">
        密码：<input type="text" name="pwd" id="pwd">
    </form>
    <button id="submit_btn">提交</button>
    <div>返回的数据:<p id="res"></p></div>
</div>
<script>
    $("#submit_btn").click(function () {
        var formdata=new FormData();
        // 需要new一个FormData对象，在哪创建都行，最后放在ajax的data里就可以了
        formdata.append(‘user‘,$("#user").val());
        formdata.append(‘pwd‘, $(‘#pwd‘).val());
        $.ajax({
            url: ‘‘,
            type: ‘post‘,
            processData:false, // 告诉jQuery不要去处理发送的数据
            contentType:false, // 告诉jquery不要设置content-Type请求头
            data:formdata,
            success: function (res) {
                $(‘#res‘).text(res.user+res.pwd);
                console.log(res)
            }

        })
    });
</script>
</body>
</html>

class Hwk(View):
    def get(self, request):
        return render(request, ‘hwk.html‘)

    def post(self, request):
        # 如果传来的是普通数据，在request.POST里，如果是文件，在request.FILES里取
        print(request.POST)
        dic1 = request.POST
        return JsonResponse(dic1)

post form form表单提交 ajax