将数据从服务器发送到客户端

你好，我从axios请求得到JSON数据，我想把它从服务器发送到客户端，我把它转换成JSON字符串，我用app.get发送它，我试图在HTML脚本中抓取它，但我在浏览器中得到了一个错误"未捕获(在承诺中)SyntaxError:意外的令牌o在JSON中的位置1在JSON。parse()";axios。使工作正常，它返回响应!我想我有一个问题与app.get在服务器或fetch()在index.html

server.js

const express = require('express');
const app = express();
app.listen(3000, );
app.use(express.static('public'));
const axios = require('axios')
const username = 'admin'
const password = 'admin'
const token = Buffer.from(`${username}:${password}`, 'utf8').toString('base64')
const urlLAMP_0 = 'http://127.0.0.1:8282/~/mn-cse/mn-name/LAMP_0/DATA/la'
const urlLAMP_1 = 'http://localhost:8282/~/mn-cse/mn-name/LAMP_1/DATA/la'
function getDataLAMP_0(){
axios.get(urlLAMP_0, {
headers: {
'Access-Control-Allow-Credentials': 'true',
'Access-Control-Allow-Origin':'*',
"X-M2M-RI":"OM2M-webpage",
'Authorization': `Basic ${token}`,
'Accept': 'application/json',
'mode': 'cors',
'credentials': 'include',
}
})
.then(function(response) {
const jsondata = JSON.stringify(response.data['m2m:cin']);
app.get('/', (req, res)=>{
res.send(jsondata)
})
return response;
})
}

公共/index . html

<title> LAMP DATA </title>
<style>
* {
font-family: sans-serif; 
}
h1 {
color: #009879;
font-size: 300%;
text-align: center;;
}
.content-table {

border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
min-width: 400px;
border-radius: 5px 5px 0 0;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.content-table thead tr {
background-color: #009879;
color: #ffffff;
text-align: left;
font-weight: bold;
}
.content-table th,
.content-table td {
padding: 12px 15px;
}
.content-table tbody tr {
border-bottom: 1px solid #dddddd;
}
.content-table tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
}
.content-table tbody tr:last-of-type {
border-bottom: 2px solid #009879;
}

</style>
<body>
<h1> lamp Data </h1>
<table class="content-table">
<thead>
<tr>
<th>Name</th>
<th>rn</th>
<th>ty</th>
<th>ri</th>
<th>pi</th>
<th>ct</th>
<th>lt</th>
<th>st</th>
<th>cnf</th>
<th>cs</th>
<th>con</th>
</tr>
</thead>
<tbody>
<tr>
<td>LAMP_0</td>
<td><span id="rn0"></span></td>
<td><span id="ty0"></span></td>
<td><span id="ri0"></span></td>
<td><span id="pi0"></span></td>
<td><span id="ct0"></span></td>
<td><span id="lt0"></span></td>
<td><span id="st0"></span></td>
<td><span id="cnf0"></span></td>
<td><span id="cs0"></span></td>
<td><span id="con0"></span></td>
</tr>
<tr>
<td>LAMP_1</td>
<td><span id="rn1"></span></td>
<td><span id="ty1"></span></td>
<td><span id="ri1"></span></td>
<td><span id="pi1"></span></td>
<td><span id="ct1"></span></td>
<td><span id="lt1"></span></td>
<td><span id="st1"></span></td>
<td><span id="cnf1"></span></td>
<td><span id="cs1"></span></td>
<td><span id="con1"></span></td>
</tr>
</tbody>
</table>
<script>
fetch('/')
.then(function(response) {
console.log(response)
const jsondata = JSON.parse(response);
document.getElementById("rn0").textContent = jsondata['m2m:cin'].rn;
/*document.getElementById("ty0").textContent = response.data['m2m:cin'].ty;
document.getElementById("ri0").textContent = response.data['m2m:cin'].ri;
document.getElementById("pi0").textContent = response.data['m2m:cin'].pi;
document.getElementById("ct0").textContent = response.data['m2m:cin'].ct;
document.getElementById("lt0").textContent = response.data['m2m:cin'].lt;
document.getElementById("st0").textContent = response.data['m2m:cin'].st;
document.getElementById("cnf0").textContent = response.data['m2m:cin'].cnf;
document.getElementById("cs0").textContent = response.data['m2m:cin'].cs;
document.getElementById("con0").textContent = response.data['m2m:cin'].con;*/
return response;
})
</script>
</body>

像app.get这样的快速路线应该在顶层。它的实现是这样的


const express = require("express");
const app = express();
const axios = require("axios");
app.listen(3000, () => console.log("server is running"));
app.get("/", async (req, res) => {
// The rest of your code here ....
});

尝试在CodeSandbox中获得想法

代码示例

const express = require("express");
const app = express();
const axios = require("axios");
app.listen(3000, () => console.log("server is running"));
app.get("/", async(req, res) => {
try {
const username = "admin";
const password = "admin";
const token = Buffer.from(`${username}:${password}`, "utf8").toString(
"base64"
);
const urlLAMP_0 = "http://127.0.0.1:8282/~/mn-cse/mn-name/LAMP_0/DATA/la";
const urlLAMP_1 = "http://localhost:8282/~/mn-cse/mn-name/LAMP_1/DATA/la";
const response = await axios.get(urlLAMP_0, {
headers: {
"Access-Control-Allow-Credentials": "true",
"Access-Control-Allow-Origin": "*",
"X-M2M-RI": "OM2M-webpage",
Authorization: `Basic ${token}`,
Accept: "application/json",
mode: "cors",
credentials: "include"
}
});
return res.status(200).json(response.data);
} catch (err) {
console.log(err.message);
return res.status(500).json("something went wrong");
}
});
app.use(express.static("public"));

<title>LAMP DATA</title>
<style>
* {
font-family: sans-serif;
}

h1 {
color: #009879;
font-size: 300%;
text-align: center;
}

.content-table {
border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
min-width: 400px;
border-radius: 5px 5px 0 0;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.content-table thead tr {
background-color: #009879;
color: #ffffff;
text-align: left;
font-weight: bold;
}

.content-table th,
.content-table td {
padding: 12px 15px;
}

.content-table tbody tr {
border-bottom: 1px solid #dddddd;
}

.content-table tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
}

.content-table tbody tr:last-of-type {
border-bottom: 2px solid #009879;
}
</style>
<body>
<h1>lamp Data</h1>
<table class="content-table">
<thead>
<tr>
<th>Name</th>
<th>rn</th>
<th>ty</th>
<th>ri</th>
<th>pi</th>
<th>ct</th>
<th>lt</th>
<th>st</th>
<th>cnf</th>
<th>cs</th>
<th>con</th>
</tr>
</thead>
<tbody>
<tr>
<td>LAMP_0</td>
<td><span id="rn0"></span></td>
<td><span id="ty0"></span></td>
<td><span id="ri0"></span></td>
<td><span id="pi0"></span></td>
<td><span id="ct0"></span></td>
<td><span id="lt0"></span></td>
<td><span id="st0"></span></td>
<td><span id="cnf0"></span></td>
<td><span id="cs0"></span></td>
<td><span id="con0"></span></td>
</tr>
<tr>
<td>LAMP_1</td>
<td><span id="rn1"></span></td>
<td><span id="ty1"></span></td>
<td><span id="ri1"></span></td>
<td><span id="pi1"></span></td>
<td><span id="ct1"></span></td>
<td><span id="lt1"></span></td>
<td><span id="st1"></span></td>
<td><span id="cnf1"></span></td>
<td><span id="cs1"></span></td>
<td><span id="con1"></span></td>
</tr>
</tbody>
</table>
<script>
(function() {
fetch("/")
.then(function(response) {
return response.json();
})
.then(function(data) {
console.log(data);
// const jsondata = JSON.parse(data);
document.getElementById("rn0").textContent = data[0].body;
// document.getElementById("rn0").textContent = jsondata["m2m:cin"].rn;
/*document.getElementById("ty0").textContent = response.data['m2m:cin'].ty;
document.getElementById("ri0").textContent = response.data['m2m:cin'].ri;
document.getElementById("pi0").textContent = response.data['m2m:cin'].pi;
document.getElementById("ct0").textContent = response.data['m2m:cin'].ct;
document.getElementById("lt0").textContent = response.data['m2m:cin'].lt;
document.getElementById("st0").textContent = response.data['m2m:cin'].st;
document.getElementById("cnf0").textContent = response.data['m2m:cin'].cnf;
document.getElementById("cs0").textContent = response.data['m2m:cin'].cs;
document.getElementById("con0").textContent = response.data['m2m:cin'].con;*/
});
})();
</script>
</body>

代码示例

相关内容

最新更新

热门标签：