Fatal编程技术网
  • javascript/
  • Javascript 从按钮单击的Get方法获取对象列表，并插入到html页面表中

Javascript 从按钮单击的Get方法获取对象列表，并插入到html页面表中

javascript express server

Javascript 从按钮单击的Get方法获取对象列表，并插入到html页面表中,javascript,express,server,single-page-application,Javascript,Express,Server,Single Page Application,获取汽车列表的方法： const express = require('express') const app = express() app.use(express.static('public')) app.get('/cars', (req, res) => { res.status(200).json([{ name : 'a', color : 'red' },{ name : 'b', c

获取汽车列表的方法：

const express = require('express')

const app = express()

app.use(express.static('public'))

app.get('/cars', (req, res) => {
    res.status(200).json([{
        name :  'a',
        color : 'red'
    },{
        name :  'b',
        color : 'blue'
    }])
})

module.exports = app
我正在尝试将列表加载到我的html页面=>

当点击带有
load
id的按钮时，服务器上的
cars
列表被请求；带有
红色
颜色的车辆将加载到带有
main
id的表中，并带有
tr
每辆车

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A simple app</title>
    <script>
    async function load(){
try{
     let url ='http://localhost:8080/cars'
       let response = await fetch(url)
        let data = await response.json()
        let table = document.getElementById('main')
         table.innerHTML = ''
            for (let e of data){
                 let rowContent = `
                    <tr>
                            <td>
                                ${e.name}
                            </td>
                            <td>
                                ${e.color}
                            </td>
                        </tr>`
                    let row = document.createElement('tr')
                    row.innerHTML = rowContent
                    //row.dataset.id = e.id
                    table.append(row)
            }
              catch(err){
                    console.warn(err)
                }

}
    }
    </script>
</head>
<body>
    A simple app
    <table id=main></table>
    <input type="button" value="add" onClick={load()} id="load"/>
</body>
</html>


一个简单的应用程序
异步函数加载（）{
试一试{
让url为空http://localhost:8080/cars'
let response=等待获取（url）
let data=wait response.json（）
let table=document.getElementById（'main'）
table.innerHTML=“”
for（让e表示数据）{
让行内容=`
${e.name}
${e.color}
`
让行=document.createElement（'tr'）
row.innerHTML=行内容
//row.dataset.id=e.id
表.追加（行）
}
捕捉（错误）{
控制台。警告（错误）
}
}
}
一个简单的应用程序
没有什么理由不能这样做，这是因为
cors
，
catch
阻塞和
端口

也许你可以试试下面的
html
：



一个简单的应用程序
异步函数加载（）{
试一试{
让url为空http://localhost:3000/cars';
let response=等待获取（url）；
let data=wait response.json（）
let table=document.getElementById（'main'）；
table.innerHTML=''；
for（让e表示数据）{
让行内容=`
${e.name}
${e.color}
`;
让行=document.createElement（'tr'）
row.innerHTML=行内容；
表.追加（行）；
}
}捕获（ex）{
控制台日志（ex）；
}
}
一个简单的应用程序


现在，在您的服务器中，您可以使用以下简单的服务器进行更改：


const express=require（'express'）；
常量app=express（）；
const cors=需要（“cors”）；
app.use（cors（{origin:'*'}））；
应用程序获取（'/cars'，（请求，res）=>{
res.status（200）.json([{
名称：‘a’，
颜色：“红色”
},{
名称：‘b’，
颜色：“蓝色”
}])
});
app.listen（3000，（）=>{
log（'服务器已启动'）；
});



我希望它能帮助您。
您看到了什么错误？● 本地›点击时应加载错误：未能找到元素匹配选择器“#main tr:first child td:first child”23 |等待页面。点击（#load'）24 |等待页面。等待选择器（#main'）>25 | const first=wait页面。$eval（#main tr:first child td:first child），e=>e.textContent）首先，如果您想更改
onClick={load（）}
，那么根据您的本地设置，您可能会遇到cors问题。我想这就是cors问题。现在，我可以在我的页面中添加列表。但是测试仍然没有通过：未能找到元素匹配选择器“#main tr:first child td:first child”“但是测试仍然没有通过”，我不明白你的意思。你能解释一下吗？我对这个练习有自动测试。我想这是另一个话题。您可以创建新问题并询问，为什么可以运行自动测试。例如，请确保提供您的代码。