在html中使用ajax处理HTTP Get响应答案

【问题标题】：Processing HTTP Get response using ajax in html在html中使用ajax处理HTTP Get响应
【发布时间】：2017-08-13 20:19:22
【问题描述】：

我正在编写一个 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
    }
    ]
}

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

请求 ID |客户 ID |请求时间 |状态 |司机编号

40 | 123 |1502652408000 | 2 | 1

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

【问题讨论】：

因为结果是对象，你可以控制它
示例代码？ @MuhammadAkberKhan
console.log(result);，但它会在浏览器控制台选项卡中显示 ut
@MuhammadAkberKhan 我希望它显示在屏幕上而不是控制台选项卡上
好的，检查我的答案是否显示在屏幕上，如果有任何问题，请评论答案

标签： javascript jquery html json ajax

【解决方案1】：

你可以像这样从 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>

【讨论】：

如果它对你有帮助@Aarish 你能投票给答案吗？
@Muhammed：这是正确的答案，我标记了它。谢谢！现在你能帮我将毫秒时间转换为当前日期 YYYY-MM-DD HH:MM:SS 格式吗？
哦，是的，这可能会有所帮助，var date = new Date(1324339200000); alert(date.toString("yyyy-MM-dd HH:MM:ss"));
同样在随后的点击中，数据被附加到 html 中。如何清除它？
好的，为此您创建一个容器 div，如
，并替换此行 => $( "body" ).append(trHTML);有了这个， $("#tableHolder").html(trHTML);

【解决方案2】：

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

【讨论】：

我不确定，因为在我之前的一个 html 中，我使用 ajax 编写了 POST 表单数据，它与这个类似，并且运行良好。无论如何让我试试
@Aarish <script> 元素的允许父元素是Metadata content 或Phrasing content。请注意 plnkr plnkr.co/edit/g4hDFAJAJbeiPsLPyhCZ?p=catalogue 指示的错误。
@guest271314 实际上你的例子正好相反.. console.log 有效，即使它在 </body> 元素之后。你确定这是你想放的正确的 plnkr 吗？
@Dekel 请注意 plnkr 编辑器中的红色 [X] 错误指示
将dataType 设置为"json" 或使用$.getJSON()