首页 > 其他分享 >- 前后端数据传输的编码格式(contentType) - Ajax朝后端提交文件数据 - Ajax朝后端提交json数据 - Ajax结合layer弹窗实现删除的二次确认 - Django如何批量添

- 前后端数据传输的编码格式(contentType) - Ajax朝后端提交文件数据 - Ajax朝后端提交json数据 - Ajax结合layer弹窗实现删除的二次确认 - Django如何批量添

时间:2023-08-08 21:35:14浏览次数:38  
标签:分页 request json Django Ajax 格式 朝后 数据

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

前后端数据传输的请求方式有两种:get、post

我们只研究post请求的编码格式

三种编码格式

urlencoded

form-data

json

发送post请求的方式

form表单

Ajax

postman(第三方工具,需要下载)

 

form表单发送post请求的时候数据的编码格式

请求头content-Type:参数

默认提交的编码格式:application/x-www-form-urlencoded

他的数据格式:username=dasdas&password=dasdas&gender=dasdas

Django后端如何接受的?

  Django后端针对符合urlencoded格式的数据,Django把数据都封装到了request.POST中了

 

multipart/form-data

编码格式从urlencoded改成form-data有什么效果?

  form表单就可以提交文件数据了

数据格式:

Content-Type:
multipart/form-data; boundary=----WebKitFormBoundary7iwnnLo3TDiHIAQz--->文件数据

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}

 

Django后端如何处理json格式的数据?

针对Ajax提交的json格式的数据,Django后端不再把数据封装到request.POST中了

对于json格式的数据,django后端不在做任何的封装,数据是纯原生的,发送过来的数据是二进制形式的

我们自己来处理这些二进制数据

复制代码
# js中序列化
JSON.stringify({'a': 1, b: 2})  ----------》{'a': 1, b: 2} 对象
contentType:'application/json',
    

# 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提交文件数据(重要)

复制代码
# 前端

<body>
<input type="text" id="username">
文件:<input type="file" id="myfile">
<button class="btn btn-primary">上传</button>
<script>
    $('.btn').click(function () {
        var username = $('#username').val()
        var myfile = $('#myfile')[0].files[0]
        //发送文件数据到后端需要借助于FormData对象
        var myFromDataObj = new FormData();
        myFromDataObj.append('username',username)
        myFromDataObj.append('myfile',myfile)

        $.ajax({
            url: '',
            type: 'post',
            data: myFromDataObj,
            contentType: false,  //告诉浏览器不要做任何的编码处理,Django自己来做处理
            processData: false,  //告诉浏览器不要对我处理的数据做任何处理
            success: function (res) {
                console.log(res)
            }
        })
    })

</script>
</body>

# 后端
def files(request):
    if request.method == 'POST':
        # print(request.POST)  # <QueryDict: {'username': ['瓦达']}>
        # print(request.FILES)  # <MultiValueDict: {'myfile': [<InMemoryUploadedFile: 弥豆子.jpg (image/jpeg)>]}>
        file_obj = request.FILES.get('myfile')
        print(file_obj,type(file_obj))
        print(file_obj.name, type(file_obj.name))
        with open(file_obj.name, 'wb') as z:
            for i in file_obj:
                z.write(i)
    return render(request, 'files.html')
复制代码

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

使用第三方的UI弹窗:layer、sweetalert

https://layuiweb.com/layer/index.htm-----------------layer弹窗模版网站

复制代码
<script>
        $('.del').click(function () {
            // 删除的逻辑,当我们点击删除按钮的时候,应该获取点击行的id,然后把这个id传到后端
            //做删除逻辑
            //找到点击行的id值
            var id = $(this).attr('delete_id');
            var _this = $(this)
            //发送Ajax请求,做一个二次确认
            layer.confirm('您确定要删除吗?', {
                btn: ['删了它', '点错了'] //按钮
            }, function () {
                $.ajax({
                    url: '/book_delete/',
                    type: 'post',
                    data: {id: id},
                    success: function (res) {
                        //第一种方式:使用location.reload()刷新
                        {#layer.msg(res.msg, {icon: 1}, function (){#}
                        {#    location.reload()})#}
                        layer.msg(res.msg, {icon: 1})
                        //第二种方式:定义.btn位置,再找父标签,删除tr字段
                        {#_this.parent().parent().remove()#}
                        //第三种方式:直接给tr字段赋予一个动态类属性,直接通过类属性找到标签删除
                        $('.tr_'+id).remove()
                    }
                })
            });

        })
    </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)

标签:分页,request,json,Django,Ajax,格式,朝后,数据
From: https://www.cnblogs.com/shanghaipudong/p/17615431.html

相关文章

  • 使用$.ajax 来调取后台接口,一定要用try/catch包起来
    1、因为如果不用try/catch包起来,如果遇到连不上接口的情况,就会只在控制台输出信息,前台收不到报错信息try{varresponse=await$.ajax({type:'POST',url:url,data:null,contentType:"application/json;charset=UTF-8",dataType:"json"})if(response.c......
  • 前后端数据传输的编码格式,Ajax提交json格式的数据,Ajax提交文件数据,AJax结合layer弹
    前后端数据传输的编码格式(contentType)#前后端数据传输的时候请求方式有2种:getpost我们不研究get请求的url?a=1&b=2#我们只研究post请求的编码格式三种编码格式:urlencodedform-datajson#可以通过哪些方式发送post请求form表单Ajaxpostman请求头中的Content-......
  • 分页代码
    ResponseList<BookingAccountListVO>responseList=newResponseList();responseList.setTotal(listVOS.size());responseList.setPage(searchFilter.getPage());responseList.setSize(searchFilter.getSize());responseList.setTotalPage(responseList.getTotal(......
  • Ajax技术、MTV和MVC的概念
    一、Ajax技术1、AJAX(AsynchronousJavascriptAndXML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML,现在更多使用json数据)。局部刷新、一步提交2、作用前端技术,把前端的数据提交到后端的。Ajax......
  • Python基础day61 Django choices参数和Ajax技术简介
    choices参数的使用choices是ORM中常用字段的参数作用:类似于一些字段:性别、学历、客户来源、是否上学、是否结婚等有限较少选择的字段我们在表中存储的时候一般使用choices参数,用数字替代文字。案例classCustomer(models.Model):"""客户表"""qq=m......
  • mp-分页查询的学习
    使用limit关键字进行分页步骤:创建配置类,创建一个拦截器,在尾部添加limit实现分页然后创建IPage对象,利用Page实现IPage<User>page=newPage<>(1,3); 自定义分页查询:自己在resources中创建自定义查询方法,进行如下配置随后在对应的接口中将User类改为IPage IPage<User>......
  • vue表格分页以及增删改查的实际应用
    效果:1:表格以及分页2:增加一条数据3:删除一条数据4:修改一条数据5:查询一条数据<template><divclass="tab-container"><divclass="filter-container"style="margin-bottom:20px"><el-inputmaxlength="40&quo......
  • SQL分页优化六 分区表分页
    测试验证如果分页语句中排序的表是分区表,这时我们要看分页语句是否有跨区扫描:如果有跨区扫描,创建索引一般为global索引,如果不创建global索引,就无法保证分页的顺序与索引的顺序一致。如果只扫描一个分区这时可以创建local索引。CREATETABLEP_TEST(OWNERVARCHAR2(30),OB......
  • SQL分页优化三 降序排序+分页
    测试验证如下SQL:select*from(select*from(selecta.*,rownumrnfrom(select*fromtestorderbyobject_id,object_namedesc)a)whererownum<=10)wherern>......
  • SQL分页优化四 等值+非等值+order by分页
    测试验证现有如下SQL,每页显示10条:select*fromtestwhereowner='SYS'andobject_id>1000orderbyobject_name;select*from(select*from(selecta.*,rownumrnfrom(select*fromt......