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

最新推荐文章于 2024-08-20 10:25:59 发布

wintersweetzeng

最新推荐文章于 2024-08-20 10:25:59 发布

阅读量5.7k

点赞数 1

分类专栏： js 文章标签： web js

本文链接：https://blog.csdn.net/wintersweetzeng/article/details/47168721

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!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" οnclick="load();"  value="Login"/>
        </div>
         <input type="button"  οnclick="getDetailListAjax();"  value="显示所有信息"/>
    </div>
     <div id="list">


        </div>
</body>
</html>