原生js實現ajax和將數組以列表形式顯示出來

來源:互聯網
上載者:User

標籤:web   js   

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

著作權聲明:本文為博主原創文章,未經博主允許不得轉載。

原生js實現ajax和將數組以列表形式顯示出來

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.