Javascript 如何使用node.js以HTML格式显示数据库中的查询结果

我目前正在使用node.js创建一个网页，该网页对MySQL数据库进行查询，并在表中显示结果

我希望页面在初始加载时显示数据库中的所有数据，但我还希望实现一个过滤器，用户可以在其中填写一些字段，当按下提交按钮时，将使用页面上显示的输入和结果进行新的查询

以下是我目前掌握的代码：

在“app.js”中，我连接到数据库并将其呈现到页面：

var connection = mysql.createConnection({
    // make connection
    host: ...,
    user: ...,
    password: ...,
    database: ...
});

connection.connect();

//routes
app.get("/", function(req, res){

    var cmd = `SELECT * FROM myTable`;
    connection.query(cmd, function(err, result, fields) {
        if (err) throw err;
        res.render('home', {result: result});
    });
});

在home.ejs中，我迭代result中的每个条目，在表中创建一行：

<table>
    <tr>
        <th> ... </th>
        .
        .
        .
    </tr>
    <% result.forEach(function(entry) { %>
    <tr>
        <td><%= entry.column1 %></td>
        .
        .
        .
    </tr>
    <% }) %>
</table>

... 
.
.
.
.
.
.

因此，第一部分似乎可以工作（在初始加载时显示数据库中的所有数据），但我很难完成第二部分，因为我以前没有web开发经验

我当前在页面中有一个可接受用户输入的，以及一个与表单关联的。但是，我不确定如何使用myFunction（）中的用户输入对数据库执行另一个查询，以及如何用新查询的结果替换表的当前内容

---

任何帮助都将不胜感激

好的，那么您要做的是对视图中已有的数据进行客户端筛选

问题是表是在服务器端呈现的，所以在初始加载后如何在客户端修改数据

解决方案：在渲染时将数据设置为窗口/全局上的字符串

<table id="results-table">
    <tr>
        <th> ... </th>
        .
        .
        .
    </tr>
    <% result.forEach(function(entry) { %>
    <tr>
        <td><%= entry.column1 %></td>
        .
        .
        .
    </tr>
    <% }) %>
</table>
<script>
  window.results = results;
</script>

让我们过滤

窗口。用户搜索输入的结果

：

const filterSearchBar = document.querySelector('#filter-searchbar');
const filterSubmitBtn = document.querySelector('#filter-submit-btn');

filterSubmitBtn.addEventListener('click', () => {
  const filteredResults = window.results.filter(result => {
    // Not sure what you wanna filter by but imagine that it's by a property name.
    return result.name === filterSearchBar.value;
  });
  // Final step
});

最后一步是在表模板的位置重新提交该数据客户端：

<input type="search" id="filter-searchbar"/>
<button id="filter-submit-btn"> submit</button>

const filterSearchBar = document.querySelector('#filter-searchbar');
const filterSubmitBtn = document.querySelector('#filter-submit-btn');

filterSubmitBtn.addEventListener('click', () => {
  const filteredResults = window.results.filter(result => {
    // Not sure what you wanna filter by but imagine that it's by a property name.
    return result.name === filterSearchBar.value;
  });
  const resultsTable = document.querySelector('#results-table');
  results.innerHTML = `<pre>${JSON.stringify(resultsTable)}</pre>`

});

const filterSearchBar=document.querySelector（“#filter searchbar”）；
const filterSubmitBtn=document.querySelector（“#filter submitbtn”）；
filterSubmitBtn.addEventListener（'单击'，（）=>{
常量filteredResults=window.results.filter（结果=>{
//不确定你想过滤什么，但想象一下它是通过属性名过滤的。
返回result.name==filterSearchBar.value；
});
const resultsTable=document.querySelector（“#results table”）；
results.innerHTML=`${JSON.stringify（resultsTable）}`
});

---

希望您能理解，我使用了

JSON.stringify

来向您展示过滤后的输出。此时，您需要自己制作表模板

当您说您将加载所有数据时，您的“筛选”提交是否真的需要再次往返到后端？我认为你的过滤器只会过滤客户已经拥有的数据？你能提供更多关于过滤器将要做什么的细节吗？@MatthewHarwood事实上我从来没有想过这一点，但你是对的，不必再提出另一个问题。我只是从最初的完整结果中筛选出不符合要求的数据。嘿，伙计，你的问题中有一些遗漏，但我认为我的方法对你有用。围绕模板化客户端和过滤数据，可能会有很多后续问题。这些可能更适合作为单独的stackoverflow问题，但请留下它们，我将帮助您进行指导。非常感谢您的详细回答！当我设置

window.results=result时我收到一个错误，表示结果（在RHS上）未定义。你知道为什么吗？我知道了！我意识到我只能访问ejs中的
result
变量，所以我改为使用
window.result=`
。还有一些事情需要考虑。如果此应用程序是公共的，则必须清理发送到服务器的查询。如果不是的话，坏演员可能会删除你的数据库。另外，在窗口上设置数据并不是向客户端发送数据的最佳方法。最好创建一个通过XHR获取的API。我建议。显然，您可能只是在创建一个原型，而这些都无关紧要！祝你好运在最后一行，`results.innerHTML=
${JSON.stringify（resultsTable）}
，
results
是指从app.js呈现到页面的变量吗？我可以用取消引用变量，但不能在标记内修改它。您知道如何解决此问题吗？您的筛选器是否可以
console.log（filteredResults）
如果可以，则使用它使用dom操纵客户端呈现新的表客户端
const filterSearchBar = document.querySelector('#filter-searchbar');
const filterSubmitBtn = document.querySelector('#filter-submit-btn');

filterSubmitBtn.addEventListener('click', () => {
  const filteredResults = window.results.filter(result => {
    // Not sure what you wanna filter by but imagine that it's by a property name.
    return result.name === filterSearchBar.value;
  });
  const resultsTable = document.querySelector('#results-table');
  results.innerHTML = `<pre>${JSON.stringify(resultsTable)}</pre>`

});