前后端数据传输的编码格式

发布时间 2024-01-02 11:49:12作者: Way*yy

前后端数据传输的编码格式(contentType)

# 前后端传输的时候请求方式有两种:
	GET,POST
    
# 我们只研究POST请求的编码格式:
	POST的三种编码格式:urlencoded、form-data、json

# 有哪些方式可以发送POST请求?
	form表单、Ajax、postman
    
请求头中的content-Type:参数
# 研究form表单发送post请求的时候数据的编码格式
    默认提交编码格式是:application/x-www-form-urlencoded
    它的数据格式是:username=dasdas&password=dasdas&gender=dasdas

# 那么针对application/x-www-form-urlencoded格式的数据,在Django后端是如何接收数据的?
	Django后端针对符合urlencoded格式的数据,Django把数据都封装到了request.POST中了
**************************************************************************
第二种编码格式:
	multipart/form-data
# 编码格式从urlencoded改成form-data后会有什么效果?
	form表单就可以提交数据了
# 那他的数据格式又是什么样的呢?
	Content-Type:multipart/form-data; boundary=----WebKitFormBoundary7iwnnLo3TDiHIAQz--->文件数据
# 那么针对form-data格式的数据,Django后端又是如何接收数据的呢?
    针对普通文件Django把数据封装到了request.POSt中
    针对文件数据Django把数据封装到了request.FILES中
**************************************************************************
Ajax提交POST请求数据的时候,编码格式又是怎么样的?
	# 默认的提交格式是:application/x-www-form-urlencoded; a=1&b=2
	Django后端针对符合urlencoded格式的数据,django把数据都封装到了request.POST

Ajax提交Json格式的数据

提交json格式的数据必须满足的两个条件:
1、编码格式必须是json格式的:contentType参数
2、数据必须是json{"a":1}
# 针对json格式的数据,Django后端又是如何处理的?
    针对ajax提交的json格式的数据,django后端不在把数据封装到request.POST中了
    对于json格式的数据,Django后端不再做任何的封装,数据是纯原生的,发送过来的数据是二进制形式的,而这些数据则需要我们自己处理。
# 前端发送json格式的数据
	<script>
    $('#d1').click(function () {
        $.ajax({
            url:'',
            type:'post',
            data:JSON.stringify({'username':'jason','age':25}),
            contentType:'application/json',  // 指定编码格式
            success:function () {
            }
        })
    })
</script>
# django后端接收json格式的数据
    json_str = request.body.decode('utf-8')
    print(json_str)  # {"a":1,"b":2}

    json_data = json.loads(json_str)
    print(json_data)  # {'a': 1, 'b': 2}
    print(json_data.get('a'))

Ajax提交文件数据(重要)

# 前端处理
<script>
    // 点击按钮朝后端发送普通键值对和文件数据
    $('#d4').on('click',function () {
        // 1 需要先利用FormData内置对象
        let formDateObj = new FormData();
        // 2 添加普通的键值对
        formDateObj.append('username',$('#d1').val());
        formDateObj.append('password',$('#d2').val());
        // 3 添加文件对象
        formDateObj.append('myfile',$('#d3')[0].files[0])
        // 4 将对象基于ajax发送给后端
        $.ajax({
            url:'',
            type:'post',
            data:formDateObj,  // 直接将对象放在data后面即可

            // ajax发送文件必须要指定的两个参数
            contentType:false,  // 不需使用任何编码 django后端能够自动识别formdata对象
            processData:false,  // 告诉你的浏览器不要对你的数据进行任何处理

            success:function (args) {
            }
        })


    })
</script>

# 后端处理
def ab_file(request):
    if request.is_ajax():
        if request.method == 'POST':
            print(request.POST)
            print(request.FILES)
    return render(request,'ab_file.html')

AJax结合layer弹窗实现删除的二次确认

# 我们使用第三方的UI弹窗:layer、sweetalert、
https://layuiweb.com/doc/element/form.html ----------> layui
    
    
https://layuiweb.com/layer/index.htm---------------->layer

Ajax提交数据返回页面

后端:
	def add_publish(request):
    if request.method == "POST":
        publish_name = request.POST.get("name")
        publish_addr = request.POST.get("addr")
        publish_phone = request.POST.get("phone")
        publish_obj = models.Publish.objects.filter(name=publish_name).first()
        if not publish_obj:
            try:
                models.Publish.objects.create(name=publish_name, addr=publish_addr, phone=publish_phone)
                return HttpResponse("set_publish")
            except Exception:
                return HttpResponse("add_publish")
        else:
            return render(request, 'add_publish.html')
    return render(request, 'add_publish.html')

前端:(对Ajax做处理)
    <script>
    $("#btn").click(function () {
        let name = $("#a1").val()
        let addr = $("#a2").val()
        let phone = $("#a3").val()
        let xhttp = new XMLHttpRequest();
        $.ajax({
            url: "",
            method: "post",
            data: {name: name, addr: addr, phone: phone},
            success: function (args) {
                window.location.href = args 
                # 返回格式:当前页面url/后端返回的HttpResponse("set_publish")
                path('add_publish/set_publish', views.set_publish),
            }
        })
    })
    </script>

批量插入数据

# 在django中批量插入数据
# for i in range(10000):
    #     models.UserInfo.objects.create(username='jerry_%s' % i)
    """为什么插入的数据很慢?"""
    # insert into userinfo values('jerry');
    # insert into userinfo values('jerry'), ('jerry_2'), (),('jerry'), ('jerry_2'), ();
    user_obj_list = []
    for i in range(100000):
        user_obj = models.UserInfo(username='jerry_%s' % i)
        user_obj_list.append(user_obj)
        print('jerry_%s' % i)

    '''开始操作数据库'''
    models.UserInfo.objects.bulk_create(user_obj_list)