Question

我正在编写一个html来对底层服务进行REST GET调用，并以表格格式显示JSON结果。以下是我对此的尝试

<html>
    <head>Rides Dashboard View
    </head>
    <body>
         <form name="submitform" id="submitform">
               <input type="submit" value="Refresh">
         </form>
    </body>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <script>
    $('[name="submitform"]').submit(function (e) {
    e.preventDefault(); 
    $.ajax({
        url: "http://localhost:7777/ride/dashboard",
        type: "GET",
        success: function (result) {
            alert(result);
        }
    }).done (function(data) { });
    </script>
</html>

当我执行提交操作时，我希望生成的JSON数据会被警告，但没有任何反应。此处还有示例JSON输出数据

{
  "data": [
    {
      "requestId": 40,
      "customerId": 123,
      "requestTime": 1502652408000,
      "status": 2,
      "driverId": 1
    },
    {
      "requestId": 41,
      "customerId": 342,
      "requestTime": 1502652425000,
      "status": 2,
      "driverId": 2
    }
    ]
}

我想以表格格式显示它，如下所示

RequestId | CustomerId | RequestTime |状态| DriverId

40 | 123 | 1502652408000 | 2 | 1

那么有人可以帮助我以这种表格格式处理来自GET请求的结果数据吗？

Answer 1

在HTML上关闭<script>标记后，问题为</body>标记。解决方案是在关闭HTML <script></script>标记之前放置</body>。

Answer 2

你可以像这样从json创建表，

<script type="text/javascript">

$( document ).ready(function() {
    $('[name="submitform"]').submit(function (e) {
    e.preventDefault(); 
    $.ajax({
        url: "http://localhost:7777/ride/dashboard",
        type: "GET",
        dataType: "json",
        success: function (result) {
            //alert(result);
            var trHTML = '<table><tr><th>RequestId</th><th>CustomerId</th><th>RequestTime</th><th>Status</th><th>DriverId</th></tr>';
            $.each(result.data, function (i, item) {
                    trHTML += '<tr><td>' + item.requestId + '</td><td>' + item.customerId + '</td><td>' + item.requestTime + '</td><td>' + item.status + '</td><td>' + item.driverId + '</td></tr>';
                });
            trHTML +="</table>";
            $( "body" ).append(trHTML);
        }
    });

});
</script>

处理HTTP使用html中的ajax获取响应

2 个答案: