resultDiv.textContent = "进场时间"+ data.Intime|| 0,"停车时长" + data.Parktime|| 0,"产生金额" + data.Money|| 0;为什么输出的是undefined
时间: 2024-06-05 22:09:06 浏览: 36
这是因为你使用了"||"来设置默认值,但是"||"的前后两个值之间应该使用"+"号来进行连接。正确的代码应该像下面这样:
resultDiv.textContent = "进场时间:" + (data.Intime || 0) + ",停车时长:" + (data.Parktime || 0) + ",产生金额:" + (data.Money || 0);
这样就能正确地输出进场时间、停车时长和产生金额了。
相关问题
代码如下,如何解决跨域function getTruckNo() { const TruckNo = document.getElementById("TruckNo").value; const options = { method: "GET", url: "/api/parking-info", params: { Token: "Parking2023", TruckNo: TruckNo }, headers: { "content-type": "application/json"}, }; axios.request(options).then(function (response){ console.log(response.data); var data = JSON.parse(response.data); console.log(data.TruckNo); console.log(data.Intime); console.log(data.ParkTime); console.log(data.Money); showResult(data); }) .catch(function (error) { console.error(error); }); } function showResult(data) { const resultDiv = document.getElementById("result"); resultDiv.textContent = "车牌:"+ data.TruckNo + "进场时间:"+ data.Intime+", 停车时长:" + data.ParkTime+", 产生金额:" + data.Money; }
该代码中的跨域问题可以通过在服务器端进行配置来解决。以下是几种可行的解决方法:
1. 使用代理服务器:在服务器端设置一个代理服务器,将客户端请求转发到目标服务器,然后将响应返回给客户端。这样客户端就可以绕过浏览器的同源策略限制,实现跨域请求。
2. CORS(跨域资源共享):在服务器端设置响应头部,允许指定的域名访问资源。可以在服务器端的响应中添加如下头部信息:
```
Access-Control-Allow-Origin: 允许访问的域名
Access-Control-Allow-Methods: 允许的请求方法
Access-Control-Allow-Headers: 允许的请求头部
```
例如,在 Node.js 中,可以使用以下代码来设置响应头部:
```javascript
res.setHeader('Access-Control-Allow-Origin', 'http://example.com');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
```
这样就允许了来自"http://example.com"域名的跨域请求。
3. JSONP:JSONP(JSON with Padding)是一种利用 `<script>` 标签可以跨域加载资源的特性来解决跨域问题的方法。服务器返回的数据需要包裹在一个函数调用中,并通过 `<script>` 标签引入,然后客户端通过回调函数处理返回的数据。
例如,在服务器端返回的响应中,可以将数据包裹在一个指定的回调函数中,如:
```javascript
callbackFunction({ TruckNo: '123', Intime: '2022-01-01', ParkTime: '2 hours', Money: '10' });
```
然后在客户端中定义一个同名的全局函数来处理返回的数据:
```javascript
function callbackFunction(data) {
// 处理返回的数据
showResult(data);
}
```
最后,在客户端使用 `<script>` 标签引入服务器返回的数据:
```html
<script src="http://example.com/api/parking-info?callback=callbackFunction"></script>
```
这些方法都可以解决跨域问题,具体选择哪种方法取决于你的需求和服务器环境。
function getPlateNumber() { const plateNumber = document.getElementById("plateNumber").value; const queryString = `Token=Parking20230103163153666&TruckNo=${plateNumber}`; const url = `http://10.198.8.102:8081/TruckParkTime?${queryString}`; const options = { method: "GET", url: url, headers: { "content-type": "application/json" }, }; axios .request(options) .then(function (response) { console.log(response.data); var data = JSON.parse(response.data); console.log(data.TruckNo); console.log(data.Intime); console.log(data.ParkTime); console.log(data.Money); showResult(data); }) .catch(function (error) { console.error(error); }); } function showResult(data) { const resultDiv = document.getElementById("result"); resultDiv.textContent = "车牌:" + data.TruckNo + "进场时间:" + data.Intime + ",停车时长:" + data.ParkTime + ",产生金额:" + data.Money; }如何跨域
要实现跨域,需要在服务端进行配置。常见的跨域解决方案有以下几种:
1. JSONP:通过动态创建 script 标签,将需要获取的数据作为参数传递到服务端,服务端将数据封装在回调函数中返回给前端,前端通过回调函数获取数据。
2. CORS:在服务端设置允许跨域的域名和协议。
3. 代理:前端将请求发送到自己的服务器,由服务器再请求第三方接口,最后将数据返回给前端。
在上述代码中,使用的是 axios 库发送请求,可以在请求头中添加 `Access-Control-Allow-Origin` 字段来实现跨域,例如:
```javascript
const options = {
method: "GET",
url: url,
headers: {
"content-type": "application/json",
"Access-Control-Allow-Origin": "http://example.com" // 允许跨域的域名
},
};
```
需要注意的是,这种方式需要服务端也进行配合,在响应头中添加 `Access-Control-Allow-Origin` 字段,值为允许跨域的域名。
阅读全文