前台提交的时候，要封装JSON1

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
    <meta name="apple-touch-fullscreen" content="YES"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title>封装JSON</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/animate.min.css">
</head>
<style>
    #myDIV {
        margin: 25px;
        width: 550px;
        height: 100px;
        background: orange;
        position: relative;
        font-size: 20px;
    }

    /* Chrome, Safari, Opera */
    @-webkit-keyframes mymove {
        from {top: 0px;}
        to {top: 200px;}
    }

    @keyframes mymove {
        from {top: 0px;}
        to {top: 200px;}
    }
    div{
        width: 100px;
        height: 10px;
        border: 1px solid #cccccc;
    }
    #cont{
        width: 500px;
        height: 300px;
    }
</style>
<body>
<div id="cont"></div>
<div id="oDivOut">
<div id="oDiv1" name="wangw" age="2"></div>
<div id="oDiv2" name="aaa" age="212">f111111</div>
<div id="oDiv3" name="bbb" age="222">2454</div>
<div id="oDiv4" name="cc" age="1">87878</div>
<div id="oDiv5" name="dd" age="2">fffff</div>

</div>

<script src="js/jquery-1.11.1.min.js"></script>
<script>
    $(function(){
         $("body").click(function(){
             var oLen=$("#oDivOut div").length;
             var info;
             var jsonArr;
             var jsonCon={
                 "zongshu":"oDiv",
                 "shuoming":"wz"
             }
             
             jsonCon.zongshu=oLen;
             jsonCon.shuoming="个人信息";

             jsonCon.info={};
             for(var i=0; i<oLen;i++){
                jsonCon.info["oDiv"+i]={};
                 name=$("#oDiv"+i).attr("name");
                 age=$("#oDiv"+i).attr("age");

                jsonCon.info["oDiv"+i].name=name;
                jsonCon.info["oDiv"+i].age=age;

            }

             var jsonArr = JSON.stringify(jsonCon);
             $("#cont").html(jsonArr);
         })

    })

    //打包上传
    $(function () {
        $("body0").mousemove(function () {
            var modelArr = {
                "modelNum": modelNum,
                "pageSize": $("#picul span").size() - 1,
               "effect": $("#picEffect").val()
            }

            for (var i = 0; i < modelArr.pageSize; i++) {
                var className = $(".item").eq(i).attr("class").split(" ")[1];
                var cont = $("." + className + " *[class*=doc]").map(function () {
                    return $(this).attr("id");
                }).get().join(",");
                var contArr = cont.split(",");
                for (var j = 0; j <= i; j++) {
//console.log($(".item").eq(i).attr("data-id"));
                    modelArr["page" + i] = {
//pageNum:pageNum["pageNum"+className.split("_")[1]]
                        pageNum: $(".item").eq(j).attr("data-id")
                    }
                }


                modelArr["page" + i]["pageCont"] = {}
                for (var j = 0; j < contArr.length; j++) {
                    var contArrStr = $("#" + contArr[j]).val() || $("#" + contArr[j]).text();
                    modelArr["page" + i]["pageCont"][$("#" + contArr[j]).attr("data-direction")] = contArrStr.replace(/</g, "&lt;").replace(/>/g, "&gt;");
                }
            }

            var jsonArr = JSON.stringify(modelArr);
            $("#pack").val(jsonArr);
        });

        $("#picul").keydown(function (evt) {
            if (evt.keyCode == 9) {
                if (evt.preventDefault) {
                    evt.preventDefault();
                }
                else {
                    evt.returnValue = false;
                }
            }
        })
    })







</script>
</body>
</html>

View Code

下面是JSON 中带数组的

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
    <meta name="apple-touch-fullscreen" content="YES"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title>封装JSON</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/animate.min.css">
</head>
<style>
    #myDIV {
        margin: 25px;
        width: 550px;
        height: 100px;
        background: orange;
        position: relative;
        font-size: 20px;
    }

    /* Chrome, Safari, Opera */
    @-webkit-keyframes mymove {
        from {top: 0px;}
        to {top: 200px;}
    }

    @keyframes mymove {
        from {top: 0px;}
        to {top: 200px;}
    }
    div{
        width: 100px;
        height: 10px;
        border: 1px solid #cccccc;
    }
    #cont{
        width: 500px;
        height: 300px;
    }
</style>
<body>
<div id="cont"></div>
<div id="oDivOut">
<div id="oDiv0" name="wangw" age="1"></div>
<div id="oDiv1" name="aaa" age="2">f111111</div>
<div id="oDiv2" name="bbb" age="3">2454</div>
<div id="oDiv3" name="cc" age="4">87878</div>
<div id="oDiv4" name="dd" age="5">fffff</div>

</div>

<script src="js/jquery-1.11.1.min.js"></script>
<script>
    $(function(){
         $("body").click(function(){
             var oLen=$("#oDivOut div").length;
             var info;
             var jsonArr;
             var jsonCon={
                 "zongshu":"oDiv",
                 "shuoming":"wz"
             }

             jsonCon.zongshu=oLen;
             jsonCon.shuoming="个人信息";
             jsonCon.add="良好";

             jsonCon.info=[{}];
             for(var i=0; i<oLen;i++){
                jsonCon.info[i]={};
                 name=$("#oDiv"+i).attr("name");
                 age=$("#oDiv"+i).attr("age");

                jsonCon.info[i].name=name;
                jsonCon.info[i].age=age;

            }

             var jsonArr = JSON.stringify(jsonCon);
             $("#cont").html(jsonArr);
         })

    })

    //打包上传
    $(function () {
        $("body0").mousemove(function () {
            var modelArr = {
                "modelNum": modelNum,
                "pageSize": $("#picul span").size() - 1,
               "effect": $("#picEffect").val()
            }

            for (var i = 0; i < modelArr.pageSize; i++) {
                var className = $(".item").eq(i).attr("class").split(" ")[1];
                var cont = $("." + className + " *[class*=doc]").map(function () {
                    return $(this).attr("id");
                }).get().join(",");
                var contArr = cont.split(",");
                for (var j = 0; j <= i; j++) {
//console.log($(".item").eq(i).attr("data-id"));
                    modelArr["page" + i] = {
//pageNum:pageNum["pageNum"+className.split("_")[1]]
                        pageNum: $(".item").eq(j).attr("data-id")
                    }
                }


                modelArr["page" + i]["pageCont"] = {}
                for (var j = 0; j < contArr.length; j++) {
                    var contArrStr = $("#" + contArr[j]).val() || $("#" + contArr[j]).text();
                    modelArr["page" + i]["pageCont"][$("#" + contArr[j]).attr("data-direction")] = contArrStr.replace(/</g, "&lt;").replace(/>/g, "&gt;");
                }
            }

            var jsonArr = JSON.stringify(modelArr);
            $("#pack").val(jsonArr);
        });

        $("#picul").keydown(function (evt) {
            if (evt.keyCode == 9) {
                if (evt.preventDefault) {
                    evt.preventDefault();
                }
                else {
                    evt.returnValue = false;
                }
            }
        })
    })







</script>
</body>
</html>

View Code

封装后的JSON

{"zongshu":5,"shuoming":"个人信息","add":"良好","info":[{"name":"wangw","age":"1"},{"name":"aaa","age":"2"},{"name":"bbb","age":"3"},{"name":"cc","age":"4"},{"name":"dd","age":"5"}]}

前台提交的时候， 要封装JSON1

前台提交的时候，要封装JSON1