在页面加载时加载HTML表,附加URL响应

时间:2018-01-08 08:05:06

标签: javascript jquery html

我已经尝试在点击事件中将URL响应转换为HTML表格。但我真正需要的是,只要我加载页面,我就必须在表格中显示URL响应。 我的脚本如下:

window.onload  = function (
    $.ajax({
        type: 'GET',
        url: 'http://localhost:8080/imp/' ,
        dataType:"json", //to parse string into JSON object,
        success: function(data){
            if(data){
                var len = data.length;
                var txt = "";
                if(len > 0){
                    for(var i=0;i<len;i++){
                        if(data[i].name && data[i].age){
                            txt += "<tr><td>"+data[i].name+"</td><td>"+data[i].age+"</td></tr>";
                        }
                    }
                    if(txt != ""){
                        $("#impExtTableID").append(txt).removeClass("hidden");
                    }
                }
            }
        },
        error: function(jqXHR, textStatus, errorThrown){
            alert('error: ' + textStatus + ': ' + errorThrown);
        }
    });
    );
    return false;//suppress natural form submission });

1 个答案:

答案 0 :(得分:0)

简单我已经创建了一个包含您ID的表格,并且在tbody中我添加了您从请求网址获得的内容,

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
window.onload  = function (
    $.ajax({
        type: 'GET',
        url: 'http://localhost:8080/imp/' ,
        dataType:"json", //to parse string into JSON object,
        success: function(data){
            if(data){
                var len = data.length;
                var txt = "";
                if(len > 0){
                    for(var i=0;i<len;i++){
                        if(data[i].name && data[i].age){
                            txt += "<tr><td>"+data[i].name+"</td><td>"+data[i].age+"</td></tr>";
                        }
                    }
                    if(txt != ""){
                        $("#impExtTableID tbody").html(txt).removeClass("hidden");
                    }
                }
            }
        },
        error: function(jqXHR, textStatus, errorThrown){
            alert('error: ' + textStatus + ': ' + errorThrown);
        }
    });
    );
    return false;//suppress natural form submission });
</script>

<body>
   <table id="impExtTableID" class="hidden">
         <thead><th>Name</th><th>Age</th></thead>
         <tbody></tbody>
   </table>
</body>