在使用AJAX的GET调用中使用HTTP请求参数 [英] Making use of HTTP request param in GET call using AJAX
本文介绍了在使用AJAX的GET调用中使用HTTP请求参数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在编写一个HTML页面，使用AJAX为我的底层微服务构建带有HTTP请求参数（ driverid ）的URL，并以表格格式显示结果相应的div如下所示：
I am writing an HTML page to make a GET call constructing the URL with HTTP request param (driverid) to my underlying microservice using AJAX and display results in tabular format in the corresponding divs like below:
<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块中打印的示例数据： p>
Here are the sample data which I will be printing in the corresponding div blocks in tabular format:
{
"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专业知识来修复它。有人可以帮助我解决这个问题吗？
On making the request, the page just loads with no error in console. Also there is no HTTP call made to the backend. I am not able to fix it with my limited HTML/JS expertise. Can someone help me in getting this fixed?
推荐答案
您的代码中存在一些逻辑错误， >
there are some logical errors in your code, i have sorted,
<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请求参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
