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

最後更新：2015-07-31 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：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和將數組以列表形式顯示出來

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More