本文介绍了在使用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="ajax.googleapis/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> var driverid = get("driverid"); $('[name="submitform"]').submit(function (e) { e.preventDefault(); $.ajax({ url: "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="ajax.googleapis/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> var driverid = get("driverid"); $('[name="submitform"]').submit(function (e) { e.preventDefault(); $.ajax({ url: "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请求参数
发布评论