ajax request in two ways API

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

 

 

 

Guess you like

Origin www.cnblogs.com/clqbolg/p/11872707.html