Question

我正在编写一个HTML页面来进行GET调用，使用AJAX将HTTP请求参数（driverid）构建到我的底层微服务中，并在表格格式中显示相应的div，如下所示：

<html>
    <head>Driver App
    </head>
    <body>
         <form name="submitform" id="submitform">
               <input type="submit" value="Refresh">
         </form>

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

    <script>

    var driverid = get("driverid");
    $('[name="submitform"]').submit(function (e) {
    e.preventDefault(); 
    $.ajax({
        url: "http://localhost:7777/driver/" + driverid + "/ride",
        dataType: 'json',
        type: "GET",
        success: function (result) {
            //alert(result);

            var waitingHtml = '<table>';
            var ongoingHtml = '<table>'
            var completedHtml = '<table>';

            $.each(result.data, function (i, item) {

                    if (item.status == 0) {
                        var requestTime;
                        if (item.requestTime != 0) {
                            requestTime = new Date(item.requestTime);
                        }

                        var startDate;
                        if (item.startTime != 0) {
                            startDate = new Date(item.startTime);
                        }
                        var endDate;
                        if (item.endTime != 0) {
                            endDate =  new Date(item.endTime);
                        }

                        trHTML += '<tr><td>' + item.requestId + '</td><td>' + item.customerId + '</td><td>' + requestTime + '</td><td>' + status + '</td><td>' + item.driverId + '</td><td>' + startDate + '</td><td>'
                            + endDate + '</td></tr>';
                        });
                        trHTML +="</table>";
                        $("#WaitingHolder").html(trHTML);
                    } else if (item.status == 1) {
                        var requestTime;
                        if (item.requestTime != 0) {
                            requestTime = new Date(item.requestTime);
                        }

                        var startDate;
                        if (item.startTime != 0) {
                            startDate = new Date(item.startTime);
                        }
                        var endDate;
                        if (item.endTime != 0) {
                            endDate =  new Date(item.endTime);
                        }

                        trHTML += '<tr><td>' + item.requestId + '</td><td>' + item.customerId + '</td><td>' + requestTime + '</td><td>' + status + '</td><td>' + item.driverId + '</td><td>' + startDate + '</td><td>'
                            + endDate + '</td></tr>';
                        });
                        trHTML +="</table>";
                        $("#OngoingHolder").html(trHTML);
                    } else {
                        var requestTime;
                        if (item.requestTime != 0) {
                            requestTime = new Date(item.requestTime);
                        }

                        var startDate;
                        if (item.startTime != 0) {
                            startDate = new Date(item.startTime);
                        }
                        var endDate;
                        if (item.endTime != 0) {
                            endDate =  new Date(item.endTime);
                        }

                        trHTML += '<tr><td>' + item.requestId + '</td><td>' + item.customerId + '</td><td>' + requestTime + '</td><td>' + status + '</td><td>' + item.driverId + '</td><td>' + startDate + '</td><td>'
                            + endDate + '</td></tr>';
                        });
                        trHTML +="</table>";
                        $("#CompletedHolder").html(trHTML);
                    }
            }
        }
    }).done (function(data) { });
    });
    </script>

    <table>
    <tr><th>Waiting</th><th>Ongoing</th><th>Completion</th><tr>
    <tr>
        <td><div id="WaitingHolder">

        </div></td>

        <td><div id="OngoingHolder">

        </div></td>

        <td><div id="CompletedHolder">

        <div></td>
    </tr>

    </table>
    </body>
</html>

以下是我将以表格格式打印在相应div块中的示例数据：

{
  "data": [
    {
      "requestId": 44,
      "customerId": 234,
      "requestTime": 1502652444000,
      "status": 2,
      "driverId": 5,
      "startTime": 1502652444000,
      "endTime": 1502652744000
    },
    {
      "requestId": 52,
      "customerId": 234234,
      "requestTime": 1502658544000,
      "status": 2,
      "driverId": 5,
      "startTime": 1502658544000,
      "endTime": 1502658844000
    }
  ]
}

在发出请求时，页面只是在控制台中加载而没有错误。此外，没有对后端进行HTTP调用。我无法通过有限的HTML / JS专业知识来修复它。有人可以帮我解决这个问题吗？

Answer 1

您的代码中存在一些逻辑错误，我已经排序，

<html>
    <head>Driver App
    </head>
    <body>
         <form name="submitform" id="submitform">
               <input type="submit" value="Refresh">
         </form>

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

    <script>

    var driverid = get("driverid");
    $('[name="submitform"]').submit(function (e) {
    e.preventDefault(); 
    $.ajax({
        url: "http://localhost:7777/driver/" + driverid + "/ride",
        dataType: 'json',
        type: "GET",
        success: function (result) {
            //alert(result);

            var waitingHtml = '<table>';
            var ongoingHtml = '<table>'
            var completedHtml = '<table>';

            $.each(result.data, function (i, item) {

                    if (item.status == 0) {
                        var requestTime;
                        if (item.requestTime != 0) {
                            requestTime = new Date(item.requestTime);
                        }

                        var startDate;
                        if (item.startTime != 0) {
                            startDate = new Date(item.startTime);
                        }
                        var endDate;
                        if (item.endTime != 0) {
                            endDate =  new Date(item.endTime);
                        }

                        waitingHtml += '<tr><td>' + item.requestId + '</td><td>' + item.customerId + '</td><td>' + requestTime + '</td><td>' + status + '</td><td>' + item.driverId + '</td><td>' + startDate + '</td><td>'
                            + endDate + '</td></tr>';

                    } else if (item.status == 1) {
                        var requestTime;
                        if (item.requestTime != 0) {
                            requestTime = new Date(item.requestTime);
                        }

                        var startDate;
                        if (item.startTime != 0) {
                            startDate = new Date(item.startTime);
                        }
                        var endDate;
                        if (item.endTime != 0) {
                            endDate =  new Date(item.endTime);
                        }

                        ongoingHtml += '<tr><td>' + item.requestId + '</td><td>' + item.customerId + '</td><td>' + requestTime + '</td><td>' + status + '</td><td>' + item.driverId + '</td><td>' + startDate + '</td><td>'
                            + endDate + '</td></tr>';

                    } else {
                        var requestTime;
                        if (item.requestTime != 0) {
                            requestTime = new Date(item.requestTime);
                        }

                        var startDate;
                        if (item.startTime != 0) {
                            startDate = new Date(item.startTime);
                        }
                        var endDate;
                        if (item.endTime != 0) {
                            endDate =  new Date(item.endTime);
                        }

                        trHTML += '<tr><td>' + item.requestId + '</td><td>' + item.customerId + '</td><td>' + requestTime + '</td><td>' + status + '</td><td>' + item.driverId + '</td><td>' + startDate + '</td><td>'
                            + endDate + '</td></tr>';

                    }

            });
                    waitingHtml+='</table>';
                    $("#WaitingHolder").html(waitingHtml);
                    ongoingHtml+='</table>';
                    $("#OngoingHolder").html(ongoingHtml);
                    completedHtml+='</table>';
                    $("#CompletedHolder").html(completedHtml);

        }
    });
    </script>
    <div id="WaitingHolder"></div>
    <div id="OngoingHolder"></div>
    <div id="CompletedHolder"></div>
</body>
</html>

在使用AJAX的GET调用中使用HTTP请求参数

1 个答案: