【发布时间】：2018-01-22 06:49:16
【问题描述】：
我正在编写一个 HTML 页面以使用 AJAX 对我的底层微服务使用 HTTP 请求参数 (driverid) 进行 GET 调用，并在相应的 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 专业知识来修复它。有人可以帮我解决这个问题吗？
【问题讨论】：
-
你调试过这个吗？您的问题只是说明了您要做什么，并没有详细说明您遇到的问题
-
我已经测试过了，页面刚刚刷新。我没有看到请求被发送到后端。
-
你真的需要 Ajax 吗？指定：如果不需要页面获取实时信息，则不需要ajax。 “表格格式的 div 块”我建议使用 XML 或 JSON。仅仅是因为您可以使用“更简单”的现有代码，例如 DOMparser (XML)。或者您可以签出 firebase，它是来自 google 的免费“易于使用”的数据库，它更简单，但更有限。
-
好的，我明白了。你能帮我提供示例代码吗？
-
是否正在处理表单“提交”事件？您可以通过处理函数第一行的警报轻松检查这一点。这是第一条评论中提到的基本调试信息。
标签： javascript html ajax http-get