有关post的三种提交格式

有关数据提交格式

前端

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

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

相关推荐