zhufengnodejs / 201508ajax

201508aja预习课
MIT License
1 stars 33 forks source link

13.通过ajax获取数据books.json数据并添加到table中。 #16

Open zhufengnodejs opened 8 years ago

zhangguiping2015 commented 8 years ago

index.html

//访问books.json
    // 然后把得到的数据加载到结构table里
    var oTab = document.getElementById("tab");
    var tBody = oTab.tBodies[0];
    var oRows = tBody.rows;
    var xhr=XHR();
     xhr.open("get","info.json",true);
     xhr.onreadystatechange=function(){
        if(xhr.readyState==4 && xhr.status==200){
           var aryData=xhr.responseText;
           aryData=eval("("+aryData+")");
           // console.log( aryData instanceof Array)
           function bindData(){
             for(var i=0;i<aryData.length;i++){
               var oTr = document.createElement("tr");
               var cur=aryData[i];
                 console.log(cur);
               for (var key in cur) {
                   console.log(key+cur[key])
                   var oTd = document.createElement("td");
                   oTd.innerHTML = cur[key];
                   oTr.appendChild(oTd);
               }
                 tBody.appendChild(oTr);
               }
           }
            bindData();
        }
    }
    xhr.send();

infor.json


 [
    {"name":"张三","age":"18"},
    {"name":"李四","age":"24"},
    {"name":"赵武","age":"38"},
    {"name":"王妞","age":"37"},

 ]
Brolly0204 commented 8 years ago
var xhr=XHR();
xhr.open("get","books.json","true");
xhr.onreadystatechange=function(){
    if(xhr.readyState==4){
        console.log(xhr.responseText);
        var a=eval(xhr.responseText);
        for(var i=0;i< a.length;i++){
            console.log(a[i]["name"]);
            var aa=a[i]["name"];
         var tt=document.createElement("tr");
            var td1=document.createElement("td");
             td1.innerHTML="书名:"+aa;
            tt.appendChild(td1);
            tD.appendChild(tt);
        }
    }
};
xhr.send();
renjinhui commented 8 years ago

任金辉

var TR=document.getElementById("ttr");
    var xhr=new XMLHttpRequest();
    xhr.open("get","books.json",true);
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4){
            var responseText=xhr.responseText;
            console.log(responseText);
            var a=eval(responseText)
//            console.log(a);
            var ary=[];
            for(var i=0;i< a.length;i++){
             ary[i]=a[i]["name"];
            }
//            var ary=(a[0]["name"]);
            console.log(ary);

            var str="";
            for(var i=0;i<ary.length;i++){
                str+="<tr><td>书名:"+ary[i]+"</td></tr>"
            }
            TR.innerHTML=str;
        }
    }
    xhr.send();
Liuyundere commented 8 years ago
var tbody = document.getElementById("tbody");
var xhr = new XMLHttpRequest();
var xhr = new XMLHttpRequest();
// 方法  Url 是否异步
xhr.open('get','books.json',true);
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        var responseText = xhr.responseText;
        var reg = JSON.parse(responseText);
        for(var i = 0; i <reg.length; i++) {
            var tr = document.createElement("tr");
            var td = document.createElement("td");
            td.innerHTML = reg[i].name;
            tr.appendChild(td);
            tbody.appendChild(tr);
        }
    }
}
xhr.send();