查看:5241|回复:0
如何用js解析json格式的数据并生成html页面 发表时间:2012-12-19 17:19:10

洗心、革面。

0分享0主题0帖子

学徒一级

(初出茅庐)

issue.js中json格式:

var issueList = [{
date : '201108',
issues : [{
 n : '5',
 t : '20110817',
 d : '../520110817/'
}]
}, {
date : '201109',
issues : [{
 n : '2',
 t : '20110909',
 d : '../220110909/'
}, {
 n : '3',
 t : '20110916',
 d : '../320110916/'
}, {
 n : '1',
 t : '20110919',
 d : '../20110919/'
}, {
 n : '1111',
 t : '20110921',
 d : '../111120110921/'
}, {
 n : '11',
 t : '20110929',
 d : '../日日日20110929/'
}, {
 n : '2222',
 t : '20110930',
 d : '../222220110930/'
}]
}];
analysis.js:


function create_edition(){
var newW = window.open("", "edition" );
newW.document.write("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\"><head>");
newW.document.write("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />");
//newW.document.write("<link href=\"staticpage/css/mulu_m1.css\" type=\"text/css\" rel=\"stylesheet\" rev=\"stylesheet\" media=\"all\"/>");
newW.document.write("<style type=\"text/css\">");
newW.document.write("body{margin:0;padding:0;font-size:12px;font-family:宋体;line-height:180%;}");
newW.document.write("a{text-decoration:none;color:#000;}");
newW.document.write(".div_center {width:987px;margin:auto;padding-top:10px;}");
newW.document.write(".left_c{float:left;width:430px;height:auto;}");
newW.document.write(".ban1 div{ width:406px; height:580px; border:1px solid #932856; padding:5px 0 0 6px; }");
newW.document.write(".right_c1{ float:right; width:530px; padding:100px 0px  0px 20px; }");
newW.document.write(".jj{ height:40px;}h2{ height:50px;}");
newW.document.write("</style>");
newW.document.write("<SCRIPT language=\"Javascript\">");

var issueLists="[";
  if(issueList.length >0){
   for(var i=0;i<issueList.length;i++){
    var issues = issueList[i].issues;
    issueLists +="{date: '"+issueList[i].date+"',issues : [";
    for(var j=0;j<issues.length;j++){
     issueLists +="{n:'"+issues[j].n+"',t:'"+issues[j].t+"',d:'"+issues[j].d+"'}";
     if(j != issues.length-1){issueLists +=",";}
     if(j == issues.length-1){issueLists += "]}";}
    }
    if(i != issueList.length-1){issueLists +=",";}
    if(i == issueList.length-1){issueLists += "];";}
   }
  }
 newW.document.write("var issueList="+issueLists+";");
 //初始 日期参数
 newW.document.write("function load_issue(){");
 newW.document.write("if(typeof issueList != \"undefined\" && issueList.length >0){");
 newW.document.write("var year = issueList[0].date.substring(0,4);");
 newW.document.write("var month;");
 newW.document.write("var y = document.getElementById(\"y\");");
 newW.document.write("y.options.length = 0;");
 newW.document.write("y.options.add(new Option(year,year));");
 newW.document.write("var m = document.getElementById(\"m\");");
 newW.document.write("m.options.length = 0;");
 newW.document.write("var date;");
 newW.document.write("var d = document.getElementById(\"d\");")
 newW.document.write("d.options.length = 0;");
 newW.document.write("for(var i=0;i<issueList.length;i++){");
 newW.document.write("month = issueList[i].date.substring(4);");
 newW.document.write("m.options[i] = new Option(month,month);");
 newW.document.write("}");
 newW.document.write("if(typeof issueList != \"undefined\" && issueList.length >0){");
 newW.document.write("for(var i=0;i<issueList.length;i++){");
 newW.document.write("var issues = issueList[0].issues;");
 newW.document.write("for (var j =0; j< issues.length; j++){");
 newW.document.write("date = issues[j].t.substring(6);");
 newW.document.write("d.options[j] = new Option(date,date);");
 newW.document.write("}}}}Dchange('ck');};")
 //月下拉改变函数
 newW.document.write("function Mchange (value){");
 newW.document.write("var date;");
 newW.document.write("var d = document.getElementById('d');");
 newW.document.write("d.options.length = 0;");
 newW.document.write("if(typeof issueList != \"undefined\" && issueList.length >0){");
 newW.document.write("for(var i=0;i<issueList.length;i++){");
 newW.document.write("if(value == issueList[i].date.substring(4)){ ");
 newW.document.write("var issues = issueList[i].issues;");
 newW.document.write("for (var j =0; j< issues.length; j++){");
 newW.document.write("date = issues[j].t.substring(6);");
 newW.document.write("d.options[j] = new Option(date,date);");
 newW.document.write("}}}}};");
 
 newW.document.write("function Dchange(value){temp(value);};");
 newW.document.write("function openEdition(value) { temp(value);};");
 
 newW.document.write("function temp(value) {");
 newW.document.write("var date;");
 newW.document.write("var y = document.getElementById('y').value;");
 newW.document.write("var m = document.getElementById('m').value;");
 newW.document.write("var d = document.getElementById('d').value;");
 newW.document.write("date = y+m+d;");
 newW.document.write("if(typeof issueList != \"undefined\" && issueList.length >0){");
 newW.document.write("for(var i=0;i<issueList.length;i++){");
 newW.document.write("var issues = issueList[i].issues;");
 newW.document.write("for (var j =0; j< issues.length; j++){");
 newW.document.write("if(date == issues[j].t){");
 newW.document.write("if(\"ck\"==value){ var Eurl = \"http://localhost:8080/xww/staticpage/\"+issues[j].d.substring(3)+\"my_images/AA_1_new_static.jpg\";");
 newW.document.write("document.getElementById('img').src=Eurl;");
 newW.document.write("}");
 newW.document.write("if(\"open\"==value){");
 newW.document.write("window.open(\"http://localhost:8080/xww/staticpage/\"+issues[j].d.substring(3)+\"edition_1.html\");");
 newW.document.write("}}}}}};");
 

newW.document.write("function test() { alert('test"+issueList.length+"');}");
newW.document.write("</SCRIPT>");
//document.write(" <SCRIPT language=Javascript src=\"js/issue.js\" charset='utf-8'><\/script>");
//document.write("<SCRIPT language=Javascript src=\"js/edition.js\" charset='utf-8'><\/script>");
newW.document.write("<title>版图</title>");
newW.document.write("</head>");
newW.document.write("<body >");
newW.document.write("<body onload=\"load_issue();\">");
newW.document.write("<div class=\"div_center\"> ");
newW.document.write("<!--左侧版面图部分-->");
newW.document.write("<div class=\"left_c\"><div class=\"ban1\"><div><img src=\"staticpage/222220110930/my_images/首都食品安全报_1_new_static.jpg\" usemap=\"#PagePicMap\" border=\"0\" height=\"575\" width=\"400\" id=\"img\"></div></div></div>");
newW.document.write("<!--右侧目录部分-->");
newW.document.write("<div class=\"right_c1\">");
newW.document.write("<h2>健康导报</h2>");
newW.document.write("<p class=\"jj\"><select id=\"y\" name=\"y\"><option value=\"0\">---年---</option></select></p>");
newW.document.write("<p class=\"jj\">");
newW.document.write("<select id=\"m\" name=\"m\" onchange=\"Mchange(this.value)\"><option value=\"0\">---月---</option></select>");
newW.document.write("<select id=\"d\" name=\"d\" onchange=\"Dchange('ck');\"><option value=\"0\">---日---</option></select>");
newW.document.write("</p>");
newW.document.write("<p class=\"jj\"><input type=\"button\" value=\"  确  定  \" style=\"background-color: red;color: white;\" onclick=\"openEdition('open');\"/> <!-- <a href=\"#\"><img border=\"0\" src=\"images/qd.jpg\" width=\"127\" height=\"39\" /></a> --></div></p>");
newW.document.write("</div>");
newW.document.write("</body></html>");
newW.document.close();
}

function local_edition(){
//document.write("<input type=\"button\" value=\"  版图  \" onclick=\"create_edition();\>");
//document.write("<a href='http://localhost:8080/xww'  onclick=\"create_edition();\">版图</a>");
}

您需要登录以后才可以回帖    登录|注册