用script.js做一个网页,输入车牌显示停车时间,停车费,实现网页跨域。接口如下import axios from "axios"; const options = { method: 'GET', url: 'http://10.198.8.10', params: {Token: 'Parking2023', TruckNo: '粤AFN8885'}, headers: {'content-type': 'application/json'} }; axios.request(options).then(function (response) { console.log(response.data); }).catch(function (error) { console.error(error); });
时间: 2024-04-18 17:33:21 浏览: 22
为了在网页中实现输入车牌显示停车时间和停车费用,并实现网页跨域访问,你可以按照以下步骤进行操作:
1. 在你的项目中创建一个 HTML 文件,例如 `index.html`。
2. 在 `index.html` 中添加必要的 HTML 结构和元素,例如输入车牌号的文本框、按钮和用于显示停车时间和停车费用的元素。示例代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>停车信息</title>
</head>
<body>
<label for="plate">车牌号:</label>
<input type="text" id="plate" />
<button onclick="getParkingInfo()">获取信息</button>
<p id="time"></p>
<p id="fee"></p>
<script src="script.js"></script>
</body>
</html>
```
3. 在 `script.js` 文件中复制粘贴你提供的代码,并将其包裹在一个名为 `getParkingInfo()` 的函数中。这样,当用户点击获取信息按钮时,该函数将被调用。修改后的代码示例如下:
```javascript
function getParkingInfo() {
const plate = document.getElementById('plate').value;
const options = {
method: 'GET',
url: 'http://10.198.8.10',
params: { Token: 'Parking2023', TruckNo: plate },
headers: { 'content-type': 'application/json' }
};
axios.request(options).then(function (response) {
const timeElement = document.getElementById('time');
const feeElement = document.getElementById('fee');
timeElement.textContent = '停车时间:' + response.data.time;
feeElement.textContent = '停车费用:' + response.data.fee;
}).catch(function (error) {
console.error(error);
});
}
```
4. 保存 `script.js` 文件和 `index.html` 文件。
现在,你已经创建了一个包含输入车牌号、获取停车信息并显示停车时间和停车费用的网页。当用户在文本框中输入车牌号并点击按钮时,网页将通过跨域请求访问接口,获取相应的停车信息并显示在页面中。请确保在运行网页时,`script.js` 文件被正确引入,并且你的服务器允许跨域请求。