<!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, "<").replace(/>/g, ">"); } } 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>
下面是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, "<").replace(/>/g, ">"); } } 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>
封装后的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"}]}