Ajax之数据准备（前端数据转成JSON）

在使用ajax进行通信时，我们知道一般是传输json串，那么如何将前端数据转换为JSON呢？或者有没有一个通用方法，直接将表单数据转化为json？

1. 普通数据上传

将数据转化成JSON字符串

JSON.stringify({ })

前端ajax代码

     var username= $("#username").val();
        $.ajax({
            url: "./role/save",
            data: JSON.stringify({
                username:username
            }),
            type: "POST",
            contentType:  "application/json;charset=utf-8",
            dataType: "json",
            success:function (json) {

            },
        })

后端采用@RequestBoby注解，将请求的JSON串转换为具体对象。

    @ResponseBody
    @RequestMapping("save")
    public ResponseVo saveUserInfo(@RequestBody Map user){
        logger.info(JSON.toJSONString(user));
        //用户操作
        return null;
    }

2. 表单数据

通过公共的方法，自动的获取form表单中的数据，并将其转化为JSON串。

1. 公共组件

$.fn.serializeJsonObj = function () {
    var o = {};
    var a = this.find("input:not(.data-submit-ignore),select:not(.data-submit-ignore),textarea:not(.data-submit-ignore)").serializeArray();
    $.each(a, function () {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push($.trim(this.value) || '');
        } else {
            o[this.name] = $.trim(this.value) || '';
        }
    });
    return o;
};

$.fn.serializeJsonStr = function () {
    return JSON.stringify(this.serializeJsonObj());
};

2. html代码

需要注意的点就是：该组件只能获取标签中的值，对于其他标签【处理办法：将值手动赋予到隐藏的input标签中】。

  

    

      
员工信息
      

        
      
    
    

      

        

          

            
              *员工姓名
            

              
              
            
          
          <%--编辑权限--%>
            

              角色权限
              

                
                
                  请选择
                  
                    ${role.roleName}
                
              
            
        
      
    
  

3. javascript代码

//绑定点击事件
var save = function() {
    //防止重复提交
    if ($(this).hasClass("disabled")) return;
    //是否通过校验
    if ($('.edit-from').valid() == false) {
        return;
    }
    var roleIds = $('.select2-multiple.roleId').val();
    $("input[name='roleId']").val(roleIds);
    //点击上交时，将资源树也提交上去。
    var formData = $('.edit-from').serializeJsonStr();
    //将button对象保存（关键）
    var self = $(this);
    $.ajax({
        url: "./role/save",
        data: JSON.stringify({
            formData: formData
        }),
        type: "POST",
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        success: function(json) {
            if (json.retcode == 200) {
                layer.msg(json.message, {
                    icon: 1,
                    shade: 0.5
                },
                function() {
                    //设置成功跳转其他页面
                    window.location = "./role/init";
                });
            } else {
                self.removeClass("disabled");
                layer.alert(json.message, {
                    icon: 2
                });
            }
        },
        beforeSend: function() {
            self.addClass("disabled");
        },
        error: function() {
            self.removeClass("disabled");
            layer.alert("保存失败", {
                icon: 2
            });
        }
    })
}

1. 为防止用户重复请求，在ajax发送之前，手动设置button样式为不可编辑（disabled）。在用户请求完成之后，解除disabled编辑。
2. $('.edit-from').serializeJsonStr();使用该方法，获取表单请求数据。对于select下拉框，我们将它的值手动的赋予到input标签上。

3. 资源树数据上送

jsTree html资源树学习

对于资源树，我们要将选中的值发送给后端，需要使用其特定的方法：JSON.stringify({ rescList:$("#tree").jstree().get_checked(); })。将选中的资源id。转化为JSON.

4. 文件上送

批量处理1——文件的上传（bootstrap+Ajax+SSM）

var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
    url: '/upload',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false
})

FormData和Payload是浏览器传输给接口的两种格式，这两种方式浏览器是通过Content-Type来进行区分的。如果是application/x-www-form-urlencoded的话，则为formdata方式，如果是application/json或multipart/form-data的话，则为request payload的方式。