用eclipse写一个网页,并实现跨域,输出车牌点击查询,显示停车时间和金额,接口如下http://10.198.8.102:8081/TruckParkTime?Token=Parking2023&TruckNo=粤A5PG63;接口返回如下"{\"Code\": \"0\",\"ErrorMsg\": \"0\",\"TruckNo\": \"粤A5PG63\",\"Intime\": \"2023/7/20 9:43:32\",\"ParkTime\": \"15\",\"Money\": \"0\"}";
时间: 2023-07-28 10:08:47 浏览: 131
详解vue-cli项目开发/生产环境代理实现跨域请求
您可以使用 Eclipse 编写一个简单的网页,并使用 JavaScript 实现跨域请求和显示返回结果的功能。以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>车牌查询</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#searchBtn").click(function(){
var truckNo = $("#truckNoInput").val();
var url = "http://10.198.8.102:8081/TruckParkTime?Token=Parking2023&TruckNo=" + truckNo;
$.ajax({
url: url,
type: "GET",
dataType: "json",
success: function(data){
var code = data.Code;
var errorMsg = data.ErrorMsg;
if(code == "0"){
var intime = data.Intime;
var parkTime = data.ParkTime;
var money = data.Money;
$("#intime").text(intime);
$("#parkTime").text(parkTime);
$("#money").text(money);
$("#result").show();
} else {
alert("查询失败:" + errorMsg);
}
},
error: function(){
alert("请求失败,请重试!");
}
});
});
});
</script>
</head>
<body>
<h1>车牌查询</h1>
<div>
<label for="truckNoInput">车牌号:</label>
<input type="text" id="truckNoInput">
<button id="searchBtn">查询</button>
</div>
<div id="result" style="display: none;">
<p>停车时间: <span id="parkTime"></span></p>
<p>金额: <span id="money"></span></p>
</div>
</body>
</html>
```
将上述代码保存为一个 HTML 文件,然后在 Eclipse 中打开该文件,即可运行网页。当用户输入车牌号并点击查询按钮时,页面将会使用 Ajax 发起跨域请求,并将返回结果显示在页面上。
请注意,由于跨域请求涉及浏览器安全机制,您的接口需要设置允许跨域访问,例如通过设置响应头 `Access-Control-Allow-Origin: *` 来允许所有来源的跨域请求。
阅读全文