A native js request
function getList(){ var http = new XMLHttpRequest(); http.open("GET","url",true); http.onload = function (){ if (http.status >= 200 && http.status < 300 || http.status == 304) { var data = http.responseText; var person = JSON.parse(data); var person = person.data.user; //注意返回数据的结构 var table_node = document.getElementById("table"); var tabody_node = document.createElement("tbody"); console.log(tabody_node); table_node.appendChild(tabody_node); for(var key in person){ tabody_node.insertRow(key); for(var attr in person[key]){ var td_node = tabody_node.rows[key].insertCell(-1); var text_node = document.createTextNode(person[key][attr]); td_node.appendChild(text_node); } } }else{ console.log("wocao: " + http.status); console.log(http.statusText); } } http.send(null); }
Two, jq request
function getList(){ $.ajax({ url:"url", type:"get", dataType:"json", success: function(data){ var data = data.data.user; //注意返回数据的结构 var table_node = document.getElementById("table"); var tabody_node = document.createElement("tbody"); table_node.appendChild(tabody_node); for(var key in data){ tabody_node.insertRow(key); for(var attr in data[key]){ var td_node = tabody_node.rows[key].insertCell(-1); var text_node = document.createTextNode(data[key][attr]); td_node.appendChild(text_node); } } }, error:function(e){ console.log(e); } }); }
function the getList () { var tabody = document.getElementById ( "Table" ); $ .ajax ({ URL: "URL" , type: "GET" , dataType: "JSON" , Success: function (Data) { var Data = data.data.user; // note return data structures var STR = "<TR>" + "<TH> ID </ TH>" + "<TH> username </ TH>" + "<TH> password </ th>" +" <TH> Phone </ th> "" +" <TH> Registered </ th> " +"</tr>"; for(var i in data){ str+= "<tr>" +"<td>" +data[i].uId +"</td>" +"<td>" +data[i].username +"</td>" +"<td>" +data[i].password +"</td>" +"<td>" +data[i].phone +"</td>" +"<td>" +data[i].registerTime +"</td>" +"</tr>"; } tabody.innerHTML = str; }, error:function(e){ console.log(e); } }); }
Third, the return results