<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript">
function go(arrs){ //将一个字符串解析后放入ul标签中
var node=document.getElementById('list').firstChild;
node.appendData('\n');
for(var j=0;j<arrs.length;j++){
node.appendData('<li>'+arrs[j]+'</li>');
}
}
var xmlhttp;
function load(){ //点击事件触发跳转
alert("load");
var id = document.getElementById("id").value;
alert(id);
window.location.href='success.html?type=add&value='+id;
}
function creatajaxHttp() { //创建ajax对象
try {
// Firefox, Opera 8.0+, Safari
xmlhttp = new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("您的浏览器不支持AJAX！");
return false;
}
}
}
}
function getDetailListAjax(){ //发起ajax请求
creatajaxHttp();
xmlhttp.onreadystatechange = callback;
xmlhttp.open("GET","regist.html?type=detaillist",true);
xmlhttp.send();
}
function innerlist(arrs){ //将数组以列表li形式放入ul中 并添加style
var list = '';
var arr = new Array();
for (j=0 ; j <arrs.length;j++){
arr = arrs[j].split(' ');
alert(arr[3]);
if (arr[3]=='0'){
list += '<li style='+'"'+'color:green'+'"'+'>'+arrs[j]+'</li>';
}
else{
list += '<li style='+'"'+'color:red'+'"'+'>'+arrs[j]+'</li>';
}
document.getElementById("list").innerHTML=list;
}
}
function callback(){ //发起ajax完成后的回调函数
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
var arrs = new Array();
arrs = xmlhttp.responseText.split('\n');
innerlist(arrs);
}
}
}
</script>
</head>
<body>
<div class="header">
<h1>Login</h1>
</div>
<div class="container">
<div class="item">
<input type="text" id="id" placeholder="please input id" name="id" /><br/>
<input type="button" onclick="load();" value="Login"/>
</div>
<input type="button" onclick="getDetailListAjax();" value="显示所有信息"/>
</div>
<div id="list">
</div>
</body>
</html>版权声明：本文为博主原创文章，未经博主允许不得转载。
原文地址：http://blog.csdn.net/wintersweetzeng/article/details/47168721
