用完整代码演示,用eclipse做一个网页,并实现跨域,输入车牌号,点击查询,显示停车时间和金额。接口post如下https://10.198.8;body如下{ "parkSyscode": "998ab", "plateNo": "桂FEW261" };接口参数如下[ { "description": "", "field_type": "String", "is_checked": 1, "key": "Accept", "value": "/", "not_null": 1, "type": "Text" }, { "description": "", "field_type": "String", "is_checked": 1, "key": "Content-Type", "value": "application/json", "not_null": 1, "type": "Text" }, { "description": "", "field_type": "String", "is_checked": 1, "key": "x-ca-key", "value": "298", "not_null": 1, "type": "Text" }, { "description": "", "field_type": "String", "is_checked": 1, "key": "x-ca-signature-headers", "value": "x-ca-key", "not_null": 1, "type": "Text" }, { "description": "", "field_type": "String", "is_checked": 1, "key": "x-ca-signature", "value": "RcPInv+", "not_null": 1, "type": "Text" } ];接口返回如下{ "code": "0", "msg": "success!", "data": { "plateNo": "粤AAM6161", "cardNo": "", "parkTime": 221302, "calcType": 0, "supposeCost": "184350.00", "deduceCost": "0.00", "paidCost": "0.00", "totalCost": "184350.00", "couponCode": null, "isUsedCoupon": 0, "couponUsedMsg": null, "delayTime": 30, "currentDeduceCost": "0.00" } }
时间: 2023-07-30 21:04:54 浏览: 207
以下是一个使用Eclipse创建的完整网页,并实现跨域请求的示例代码:
index.html:
```html
<!DOCTYPE html>
<html>
<head>
<title>停车查询</title>
<script src="script.js"></script>
</head>
<body>
<h1>停车查询</h1>
<label for="plateNoInput">车牌号:</label>
<input type="text" id="plateNoInput" />
<button id="queryButton">查询</button>
<div id="resultDiv"></div>
</body>
</html>
```
script.js:
```javascript
document.addEventListener('DOMContentLoaded', function() {
var queryButton = document.getElementById('queryButton');
var resultDiv = document.getElementById('resultDiv');
queryButton.addEventListener('click', function() {
var plateNoInput = document.getElementById('plateNoInput');
var plateNo = plateNoInput.value;
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://10.198.8');
xhr.setRequestHeader('Accept', '*/*');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('x-ca-key', '298');
xhr.setRequestHeader('x-ca-signature-headers', 'x-ca-key');
xhr.setRequestHeader('x-ca-signature', 'RcPInv+');
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
displayResult(response.data);
} else {
resultDiv.innerHTML = '请求失败:' + xhr.statusText;
}
}
};
var requestBody = {
parkSyscode: '998ab',
plateNo: plateNo
};
xhr.send(JSON.stringify(requestBody));
});
function displayResult(data) {
resultDiv.innerHTML = '停车时间:' + data.parkTime + '秒<br>' +
'金额:' + data.totalCost;
}
});
```
请将以上代码分别保存为`index.html`和`script.js`,并将两个文件放置在同一个目录下。
然后,在Eclipse中创建一个Dynamic Web Project,将上述文件添加到项目的WebContent文件夹中。
配置好本地服务器(如Tomcat),启动服务器并在浏览器中打开页面(例如http://localhost:8080/你的项目名/index.html)。
现在你应该可以在网页中输入车牌号,点击查询按钮,然后显示停车时间和金额了。记得替换请求中的接口URL为实际的接口URL,并根据接口返回的数据结构进行相应的解析和显示。
阅读全文