单击按钮时从 GET 方法获取对象列表并插入 html 页表答案

【问题标题】：Get list of objects from GET method on button click and insert into html page table单击按钮时从 GET 方法获取对象列表并插入 html 页表
【发布时间】：2020-02-04 22:55:39
【问题描述】：

获取汽车列表的方法：

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 页面中=>

点击id为load的按钮时，请求服务器上cars的列表；带有red 颜色的汽车被加载到带有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>

【问题讨论】：

你看到了什么错误？
● 本地 › 应在单击时加载错误：找不到匹配选择器“#main tr:first-child td:first-child”的元素 23 |等待 page.click('#load') 24 |等待 page.waitForSelector('#main') > 25 | const first = await page.$eval("#main tr:first-child td:first-child", e => e.textContent)
首先，你要改onClick={load()}
那么您可能会遇到 cors 问题，具体取决于您的本地设置
我想这是 cors 问题

标签： javascript express server single-page-application

【解决方案1】：

您做不到的原因很少，因为cors、catch 阻止和port。

也许你可以试试下面这个html：

<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:3000/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;
                table.append(row);
            }
        } catch(ex) {
            console.log(ex);
        }
    }
    </script>
</head>
<body>
    A simple app
    <table id=main></table>
    <input type="button" value="add" onClick={load()} id="load"/>
</body>
</html>

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

const express = require('express');
const app = express();

const cors = require('cors');
app.use(cors( { origin: '*'}));


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


app.listen(3000, () => {
  console.log('Server is up');
});

希望对你有帮助。

【讨论】：

它正在工作，我可以在我的页面中添加列表。但是测试仍然没有通过：未能找到匹配选择器“#main tr:first-child td:first-child”的元素
“但测试仍然没有通过”，我不明白你的意思。你能解释一下吗？
我对这个练习有自动测试。
我认为这是另一个话题。您可以创建新问题并询问为什么可以运行自动测试。例如，确保提供您的代码。