# 实战 ## 实战1 ~~~ <!doctype html> <html> <head> <meta charset="UTF-8"> <title>图片</title> <style> .container {} .item { border: 1px solid #ccc; padding: 5px; box-shadow: 0 0 5px #ccc; width: 180px; border-radius: 5px; float: left; margin: 5px; } .item>img { height: 120px; width: 180px; } .more { clear: left; width: 20%; min-width: 150px; height: 30px; line-height: 30px; vertical-align: middle; text-align: center; margin: 0 auto; border-radius: 10px; background-color: #f0f0f0; } .more:hover { background-color: #3485FB; color: #fff; cursor: pointer; } </style> </head> <body> <div class="container" id="container"> <div class="item"> <img src="http://tupian.enterdesk.com/2014/xll/03/04/2/shaosiming3.jpg" /> </div> <div class="item"> <img src="http://tupian.enterdesk.com/2014/xll/03/04/2/shaosiming3.jpg" /> </div> <div class="item"><img src="http://tupian.enterdesk.com/2014/xll/03/04/2/shaosiming3.jpg" /></div> </div> <div class="more" onclick="init(false)">more</div> <script> function get(url, callback) { var xml = new XMLHttpRequest(); xml.open('get', url); xml.onreadystatechange = function() { if (xml.readyState == 4 && xml.status == 200) { callback & callback(JSON.parse(xml.responseText)); } } xml.send(null); } function init(f) { get('http://node.lintul.com/tast/img', function(data) { var base = 'http://node.lintul.com'; var ctn = []; for (var i = 0; i < data.message.img1.length; i++) { ctn.push('<div class="item"><img src="' + base + data.message.img1[i].url + '" /></div>'); } if (f) { document.getElementById('container').innerHTML = ctn.join(''); } else { var ele = document.getElementById('container'); ele.innerHTML = ele.innerHTML + ctn.join(''); } }); } window.onload = function() { init(true); } </script> </body> </html> ~~~ ## 实战2 完成网页上数据的拼接 1. [数据下载](http://pan.baidu.com/s/1hsjXDxa) 解压 三个文件 ![](https://box.kancloud.cn/7f17b200382b4f4ff7004776de688815_666x150.png) 2. 运行 demo.exe 若失败则打开 conf目录 ~~~ appname = demo httpport = 8888 runmode = dev staticdir = assets uploadfile DirectoryIndex = false ~~~ ![](https://box.kancloud.cn/8daa8d6061f3f863ce627722fb8f0115_394x132.png) 修改httpport( 端口号) 3. 浏览器输入[http://127.0.0.1:8888/](http://127.0.0.1:8888/) 就可访问 **注意使用期间程序不可关闭** ![](https://box.kancloud.cn/7bc2c8210788ec3b74ec72e4605249c7_543x334.png) * * * * * demo 为效果界面 ![](https://box.kancloud.cn/c7ef27593af8709cdec29a76d52effa5_1043x552.png) api为数据源 ![](https://box.kancloud.cn/7432b0bb29597144ae87ecea7bd9939d_1130x384.png) 核心代码 ~~~ <script> function ajax(options) { options = options || {}; options.type = (options.type || "GET").toUpperCase(); var params = formatParams(options.data); if (window.XMLHttpRequest) { var xhr = new XMLHttpRequest(); } else { var xhr = new ActiveXObject('Microsoft.XMLHTTP'); } xhr.onreadystatechange = function () { if (xhr.readyState == 4) { var status = xhr.status; if (status >= 200 && status < 300) { options.success && options.success(JSON.parse(xhr.responseText)); } else { options.fail && options.fail(status,xhr.responseText); } } } if (options.type == "GET") { xhr.open("GET", options.url + "?" + params, true); xhr.send(null); } else if (options.type == "POST") { xhr.open("POST", options.url, true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send(params); } } function formatParams(data) { var arr = []; for (var name in data) { arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name])); } arr.push(("v=" + Math.random()).replace(".","")); return arr.join("&"); } window.onload=function(){ ajax({ url: "/api/list", type:"get", data: null, success: function (data) { var resHtml=''; document.getElementById('ctn_msg').innerHTML='status:'+data.status+'&nbsp;&nbsp;count:'+data.count; for (var i=0;i<data.data.length;i++){ resHtml+='<tr>'; resHtml+='<td>'+data.data[i].Id+'</td>'; resHtml+='<td>'+data.data[i].Num+'</td>'; resHtml+='<td>'+data.data[i].Name+'</td>'; resHtml+='<td>'+data.data[i].Sex+'</td>'; resHtml+='<td>'+data.data[i].Major+'</td>'; resHtml+='<td>'+data.data[i].Mname+'</td>'; resHtml+='<td>'+data.data[i].Nation+'</td>'; resHtml+='<td>'+data.data[i].Place+'</td>'; resHtml+='<td>'+data.data[i].Batch+'</td>'; resHtml+='</tr>'; } document.getElementById('ctn_data').innerHTML=resHtml; }, fail: function (status,msg) { } }); }; </script> ~~~