2.知识点#页面数据组装成json格式传到后台保存

页面保存按钮：

 

 //保存 或提交
function saveDetail(buttonType) {
    //获取页面的基本信息
    var atalasDraft = $("#validation-form").serializeObject();
    var valided = true;
    //alert(JSON.stringify(atalasDraft));
    //判断封面是否上传
    if($("#image_div3").find(".img_preview").length == 0){
        alertShow("封面为必填项！");
        valided = false;
        return false;
    }
    //判断图片是否上传
    if($("#image_div4").find(".img_preview").length == 0){
        alertShow("图片为必填项！");
        valided = false;
        return false;
    }
    //判断图片不能超过100张
    if($("#image_div4").find(".img_preview").length > 100){
        alertShow("图片最大支持100张！");
        valided = false;
        return false;
    }

    //判断分类标签
    if(atalasDraft.categoryTag == undefined){
        alertShow("分类标签为必填项！");
        valided = false;
        return false;
    }

    try {
        valided = $("#validation-form").validate();
    }catch (e){
        console.warn(e.message);
        valided = false;
    }
    //判断 图片序号是否重复
    var numberMap={};
    var returnEach=true;
    $("#image_div4").find(".img_preview").each(function(i){
        var key = $(this).find(".nunber_input").val();
        //alert("key:"+key+",value:"+numberMap[key]);
        if(numberMap[key]==null ||numberMap[key]==undefined){
            numberMap[key] = 1;
        }else{
            alertShow("图片序号【"+key+"】重复，请修改！");
            valided = false;
            returnEach = false;
        }
        if(returnEach == false){
            valided = false;
            return false;
        }
    });

    console.log("校验结果="+valided)
    if(valided){
        $("#saveButton").attr("disabled","disabled");
        $("#submitButton").attr("disabled","disabled");
        $("#closeButton").attr("disabled","disabled");
        //必填项校验通过之后组装标签和图片添加两个多选想内容到activityInfo对象中
        //获取标签
        var tags = $.trim($("#tag").val());
        atalasDraft["tag"] = tags;

        //获取封面
        var coverImg ={};
        $("#image_div3").find(".img_preview").each(function(i){
            coverImg.imageUrl = $(this).find("input[name='imgs']").val();
            coverImg.openId = $(this).find("input[name='openId']").val();
            coverImg.caseId = $(this).find("input[name='caseID']").val();
            coverImg.sortNum = $(this).find("input[name='number']").val();
            //coverImg.description = $(this).find("input[name='description']").val();

        })
        atalasDraft["jzAtlasImageDraft"] = coverImg;

        //获取图片
        var imgs =[];//注意：定义数组对应后台vo类里面的list
        $("#image_div4").find(".img_preview").each(function(i){
            var img = {};//注意：定义类
            img.imageUrl = $(this).find("input[name='imgs']").val();
            img.openId = $(this).find("input[name='openId']").val();
            img.caseId = $(this).find("input[name='caseID']").val();
            img.sortNum = $(this).find("input[name='number']").val();
            img.description = $(this).find("input[name='description']").val();
            imgs[i] = img;
        })
        atalasDraft["jzAtlasImageDrafts"] = imgs;
        //组装按钮类型（“保存”或者“提交”）
        atalasDraft["buttonType"] = buttonType;
        //alert("activityInfo的数据;"+JSON.stringify(atalasDraft));
        $.ajax({
            contentType:"application/json",
            url:$("#validation-form").attr("action"),
            data: JSON.stringify(atalasDraft),//注意：将json对象转换为json格式
            method:"post",
            success:function (data) {
                $("#saveButton").attr("disabled",false);
                $("#submitButton").attr("disabled",false);
                $("#closeButton").attr("disabled",false);
                if(200 == data.code){
                    $("#id").val(data.value);
                    alertShow(data.msg);
                    clickIframeButton("图集编辑列表","searchButton");
                }else{
                    alertShow("保存失败！");
                }
            },
            error:function (msg) {
                $("#saveButton").attr("disabled",false);
                $("#submitButton").attr("disabled",false);
                $("#closeButton").attr("disabled",false);
                alertShow("系统异常，请稍后再试！");
            }
        });
    }
}

 

 

接受页面信息的vo类：

 

public class JzAtlasDraftVo extends JzAtlasDraft{

    //接收页面按钮操作类型
    private Integer buttonType;
    //存放封面
    JzAtlasImageDraft jzAtlasImageDraft;
   // 存放图信息
    private List<JzAtlasImageDraft> jzAtlasImageDrafts;

    public Integer getButtonType() {
        return buttonType;
    }

    public void setButtonType(Integer buttonType) {
        this.buttonType = buttonType;
    }

    public JzAtlasImageDraft getJzAtlasImageDraft() {
        return jzAtlasImageDraft;
    }

    public void setJzAtlasImageDraft(JzAtlasImageDraft jzAtlasImageDraft) {
        this.jzAtlasImageDraft = jzAtlasImageDraft;
    }

    public List<JzAtlasImageDraft> getJzAtlasImageDrafts() {
        return jzAtlasImageDrafts;
    }

    public void setJzAtlasImageDrafts(List<JzAtlasImageDraft> jzAtlasImageDrafts) {
        this.jzAtlasImageDrafts = jzAtlasImageDrafts;
    }

 

 

controller接收请求：

 

/**
 * 保存 图集详情页
 *
 * @return
 */
@ResponseBody
@RequestMapping(value = "/saveAtlasDetail", method = RequestMethod.POST)
public Result saveAtlasDetail(@RequestBody JzAtlasDraftVo vo) {//注意：@RequestBody一定要加
    /*HttpServletRequest request = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getRequest();
    String userName = request.getRemoteUser();*/
    LocalSessionUser localSessionUser = URMSSessionUserUtil.getSessionUser();
    return atlasService.saveAtlasDetail(vo, localSessionUser);
}