您的位置：首页 > Web前端 > JavaScript

原生js实现ajax和将数组以列表形式显示出来

2015-07-31 13:27 811 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： web js

相关文章推荐

新的分享

章节导航