用代码详细说明用eclipse做一个网页,有HTML和js,输入车牌号,点击查询,显示金额在页面上,并实现跨域。接口如下:http://10.198.8.102:8081/TruckParkTime?Token=Parking2023&TruckNo=粤AFN8885;返回结果如下"{"Code": "0","ErrorMsg": "0","TruckNo": "粤AFN8885","Intime": "2023/7/18 8:36:01","ParkTime": "27","Money": "0"}"
时间: 2023-07-24 09:14:49 浏览: 107
好的!下面是一个使用HTML和JavaScript的示例,可以在Eclipse中创建一个带有跨域功能的网页,根据输入的车牌号点击查询按钮,显示金额在页面上:
index.html:
```html
<!DOCTYPE html>
<html>
<head>
<title>查询车辆金额</title>
<script src="script.js"></script>
</head>
<body>
<h1>查询车辆金额</h1>
<label for="truckNoInput">车牌号:</label>
<input type="text" id="truckNoInput" />
<button onclick="queryAmount()">查询</button>
<br><br>
<div id="resultDiv"></div>
</body>
</html>
```
script.js:
```javascript
function queryAmount() {
var truckNo = document.getElementById("truckNoInput").value;
var apiUrl = "http://10.198.8.102:8081/TruckParkTime?Token=Parking2023&TruckNo=" + encodeURIComponent(truckNo);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var money = response.Money;
var resultDiv = document.getElementById("resultDiv");
resultDiv.innerHTML = "车牌号:" + truckNo + "<br>金额:" + money;
} else {
console.log("请求失败");
}
}
};
// 设置允许跨域访问
xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
xhr.open("GET", apiUrl, true);
xhr.send();
}
```
这个示例中,我们创建了一个简单的HTML页面,并使用JavaScript处理点击查询按钮的事件。当用户点击查询按钮时,JavaScript代码将触发一个HTTP GET请求,然后根据接口返回的结果更新页面上的金额显示。
请将上述代码保存为`index.html`和`script.js`,并将它们放在Eclipse中的Web项目目录下。然后,您可以在Eclipse中启动一个Web服务器(如Tomcat),并在浏览器中访问`http://localhost:8080/your-web-project/index.html`来查看和测试这个网页。
请注意,为了实现跨域请求,接口服务器需要在响应头中设置`Access-Control-Allow-Origin`字段来允许指定的源进行跨域访问。如果您无法控制接口服务器的响应头设置,您可能需要在自己的服务器端进行代理或处理跨域请求。
阅读全文