正文

前端contentType数据传输格式与ajax技术

IP云
IP云V管理员/2 阅读
11/30
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
    前端数据格式contentType参数

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

            1.urlencoded(form表单与ajax默认的数据提交编码格式)

                数据格式 name='jason'&password=''

                django后端识别到urlencoded数据格式将其处理封装到了request.POST

            2.formdata  传输文件

                支持传普通键值对也可以传文件

                普通键值还是处理放到request.POST中

                文件数据处理放到request.FILES中

            3.application/json(ajax支持)

                JSON.stringify({'name':'jason'})

                django后端对于json格式的数据不做任何处理，就将原生的二进制数据存在request.body中，让你自己手动处理

                    先解码再反序列化

    局部刷新之ajax

        异步提交(github注册示例)

        局部刷新

        四个基本参数

            url:'',  # 控制数据提交的地址，不写默认往当前位置提交

            type:'get',  # 控制的是数据的提交方式 get，post，。。。

            data:{'name':'jason'}  # 提交的数据

            success:function(data){

                # 做局部刷新的操作

                alert(data)

            }

        $('#b1').click(function(){

            $.ajax({

                url:'',  # 控制数据提交的地址，不写默认往当前位置提交

                type:'get',  # 控制的是数据的提交方式 get，post，。。。

                contentType:'application/json',

                data:JSON.stringify({'name':'jason'}),  # 提交的数据

                success:function(data){

                    # 做局部刷新的操作

                    alert(data)

                }

            })

        })

        ajax发送文件

            1.利用一个js内置对象FormData

            2.这个FormData即可以传普通的键值也可以传文件

            3.需要修改两个默认参数processData,contentType

            4.获取input框存储的文件数据$('input[type="file"]')[0].files[0]

        $('#b1').click(function(){

            # 先生成一个内置对象

            var formdata = new FormData();

            formdata.append('键','值');

            formdata.append('myfile',$('input[type="file"]')[0].files[0]);

            $.ajax({

                url:'',  # 控制数据提交的地址，不写默认往当前位置提交

                type:'get',  # 控制的是数据的提交方式 get，post，。。。

                contentType:false,

                processData:false,

                data:JSON.stringify({'name':'jason'}),  # 提交的数据

                success:function(data){

                    # 做局部刷新的操作

                    alert(data)

                }

            })

        })

相关阅读

目录[+]