Question

我正在尝试获取从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>

Answer 1

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

在按钮单击时显示带有提取的json数据的表

1 个答案: