单击按钮即可显示带有提取的json数据的表

Show table with fetched json data on a button click

本文关键字：提取 json 数据 按钮 显示 单击      更新时间：2023-09-26

我正在尝试获取从web服务获取的json数据。我已经成功地提取了数据，但我想只在单击按钮后以表格形式显示它。以下代码显示加载页面时表行的名称。它只应在单击按钮后显示。

代码：

<html>
<head>
 <script language="javascript" type="text/javascript">
            var request = null;
            function createRequest()
            {
                try {
                    request = new XMLHttpRequest();
                }
                catch (trymicrosoft)
                {
                    try {
                        request = new ActiveXObject("MsXML2.XMLHTTP");
                    }
                    catch (othermicrosoft)
                    {
                        try {
                            request = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                        catch (failed) {
                            request = null;
                        }
                    }
                }
                if (request == null)
                    alert("Error creating request object!");
            }
            function getMessage(lat,lon)
            {
                 alert(lat);
                createRequest();
                ;
                    var dis = document.getElementById("dt_id").value;
                var url = "http://localhost:8080/testrestfullapi/webresources/drugController/getdata/"+dis;
                 alert(url);
                request.open("GET", url, true);
request.onreadystatechange = handleResponse;
                request.send(null);
            }
            function handleResponse()
            {
                                if (request.readyState == 4){
                                 alert("readystate=4");
                                  var check=request.status;
                       alert(check);
                        alert(request.responseText);
           if(check.toString()=="200")
                  alert("status ok");         
                    var det = eval("(" + request.responseText + ")");
                     alert(det);
                    var data = "";
                    var i = 0;
                    for (var property in det) {
                                  alert("Entered in for loop");
                        if (Object.prototype.hasOwnProperty.call(det, property)) {
                            data = data + "<tr>";
                            data = data + "<td class='"sorting_1'">" + det[i].disease + "</td>";
                            data = data + "<td class='" sorting_1'">" + det[i].drug + "</td>";
                            data = data + "<td class='" sorting_1'">" + det[i].trade + "</td>";
                            i++;
                        }
                    }
                    document.getElementById("table_data").innerHTML = data;
                }
            }
        </script>
</head>
<body>
<div style="text-align:left; margin:8px 5px auto;">
        <label for="dt_id">Please enter disease </label>
        <input type="Text" id="dt_id" maxlength="25" size="25"/>
        <input type='button' onclick='getMessage()' value='SUBMIT'> 
</div>
 
        <table>
            <thead>
                <tr role="row">
                    <th>Disease</th>
                    <th>Drug</th>
                    <th>Trade</th>
                </tr>
            </thead>
            <tbody id="table_data">
            </tbody>
        </table>
</body>
</html>

您最初忘记隐藏table。使用此属性style="display:none;".隐藏表格。。然后点击按钮，您可以在需要时显示表格。。。

相关文章：