# 实战
## 实战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)
解压 三个文件
2. 运行 demo.exe 若失败则打开
conf目录
~~~
appname = demo
httpport = 8888
runmode = dev
staticdir = assets uploadfile
DirectoryIndex = false
~~~
修改httpport( 端口号)
3. 浏览器输入[http://127.0.0.1:8888/](http://127.0.0.1:8888/) 就可访问
**注意使用期间程序不可关闭**
* * * * *
demo 为效果界面
api为数据源
核心代码
~~~
<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+' 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>
~~~
