ajax提交data类型

一、来源

用了好久vue，一般使用axios发送请求，抽时间回顾一下原来项目的ajax请求的相关知识

二、概念

ajax有三种传递传递data的方式：

json格式
json字符串格式
标准参数模式

1.json格式

形如：
{“username”:”chen”,”nickname”:”alien”}

ajax：

$.ajax({
    type:"post",
    url:"/test/saveUser",
    data:{"username":"chen","nickname":"alien"},
    dataType:"json",
    success: function(data){
        console.log(data);
    }
});

2.json字符串

形如：
“{“username”:”chen”,”nickname”:”alien”}” 或者JSON.stringify({“username”:”chen”,”nickname”:”alien”})

ajax：

$.ajax({
    type:"post",
    url:"/test/saveUser",
    data:JSON.stringify({"username":"chen","nickname":"alien"}),
    contentType:"json/application"
    dataType:"json",
    success: function(data){
        console.log(data);
    }
});

用此格式get请求参数传递不过去，不会把json串解析成参数
而且需要添加 contentType:”json/application”

3.标准参数模式

形如：
“username=chen&nickname=alien”

ajax：

$.ajax({
    type:"post",
    url:"/test/saveUser",
    data:"username=chen&nickname=alien",
    dataType:"json",
    success: function(data){
        console.log(data);
    }
});

扩展1：表单序列化，把表单的数据拼成标准参数格式的字符串！

$("#userForm").on("submit",function(){
        //序列化
        var formData=$(this).serialize();
        //向服务器端发送添加用户请求
        //成功重新加载页面
        $.ajax({
            type:'post',
            url:'/users',
            data:formData,
            success:function(res){
                location.reload();
            },
            error:function(){
                alert('添加用户失败');
            }            
        });
        //阻止默认提交行为
        return false;
    })

扩展2：使用表单上传二进制文件

$("#modifyBox").on("change","#avatar",function(){
        var formData=new FormData();
        /* 添加了avatar自动解析，对照接口文档 */
        formData.append('avatar',this.files[0]);

        $.ajax({
            type:'post',
            url:'/upload',
            data:formData,
            //告诉$.ajax方法不要解析请求参数
            processData: false,
            //告诉$.ajax方法不要设置请求参数的类型
            contentType: false,
            success:function(res){
                console.log(res);
                //实现头像预览功能
                $("#preview").attr('src',res[0].avatar);
                //隐藏域输入框，下次将此返回地址同其他信息，一起返回
                $("#hiddenAvatar").val(res[0].avatar)
            }
        });
    })

三、总结

post请求能用1、2、3类型传递参数
get请求能用1、3类型传递参数
formdata类型的$(“#form1”).serialize() 是将对应表单中的input的name和value进行拼装，最后拼成3类型的字符串

一辈子很短，努力的做好两件事就好；第一件事是热爱生活，好好的去爱身边的人；第二件事是努力学习，在工作中取得不一样的成绩，实现自己的价值，而不是仅仅为了赚钱；