如何制作一个按钮，单击该按钮会显示 node.js 中的数据？

Question

所以我创建了一个按钮，以及一个显示来自我的数据库的数据的表格。 但是，我希望该数据仅在单击按钮时出现。 因此，当单击按钮时，我希望出现数据库中特定表中的随机行。

`<button id="breakfast2">Breakfast</button>
 <table id="mealTableContainer2">
            <thead>
                <tr>
                    <th id="mealname">Meal Name</th>
                    <th id="mealcalories">Calories</th>
                    <th id="mealtype">Type of Meal</th>
                    
                </tr>
            </thead>

            <tbody id="mealContainer2"></tbody>
  </table>`

我目前唯一的 Javascript 是为了将我的数据库放入该表中，但我真的只希望它在我单击早餐按钮时出现。 我只是想不通怎么办； 如果有人能非常简单地向我解释，我将不胜感激！

console.log('Data2 received')
$.ajax({
    url: 'http://localhost:5000' + "/read-recordsrandom",
    type: 'get',
    success: function(response) {
        var data2 = JSON.parse(response);
        if(data2.msg === "SUCCESS"){
            console.log(data2.meal)
            createMealTable2(data2.meal);
        } else {
            console.log(data2.msg);
        }
    },
    error: function(err){
        alert(err);
    }

});

}

function createMealTable2(data2) { 
var tableHTML2 = " ";
console.log("Test");
for(var i=0; i < data2.length; i++){
    tableHTML2 += "<tr>";
    tableHTML2 += "<td>" + data2[i].mealname + "</td>";
    tableHTML2 += "<td>" + data2[i].mealcalories + "</td>"
    tableHTML2 += "<td>" + data2[i].mealtype + "</td>";
    
    
    tableHTML2 += "</tr>";
}

$('#mealContainer2').html(tableHTML2);   

}

Answer 1

先隐藏再显示

 document.getElementById("breakfast2").addEventListener('click', function(event) { document.getElementById("mealTableContainer2").classList.remove('hidden'); });

 .hidden { display: none; }

 <button id="breakfast2">Breakfast</button> <table id="mealTableContainer2" class="hidden"> <thead> <tr> <th id="mealname">Meal Name</th> <th id="mealcalories">Calories</th> <th id="mealtype">Type of Meal</th> </tr> </thead> <tbody id="mealContainer2"></tbody> </table>

Answer 2

如果我是对的，默认情况下，该表应该是隐藏的。 所以你可以首先用 css 隐藏表格

更改此行以隐藏表格

<table id="mealTableContainer2" style="display: none;">

之后，您需要在javascript中的“早餐”按钮上添加事件监听器，以在点击时显示表格

document.getElementById("breakfast2").addEventListener("click", function() {
    document.getElementById("mealTableContainer2").style.display = "block";
});

Answer 3

这是点击 ajax 的方法

注意：`` 是模板文字分隔符中使用的反引号，必须是反引号

$(function() {
  const createMealTable2 = data => {
    $('#mealContainer2')
      .html(data.map(meal => `<tr>
          <td>${meal.mealname}</td>
          <td>${meal.mealcalories}</td>
          <td>${meal.mealtype}</td>
        </tr>`)
        .join("")  
      )
  };

  $("#breakfast2").on("click", function() {
    $.ajax({
      url: 'http://localhost:5000' + "/read-recordsrandom",
      type: 'get',
      success: function(response) {
        var data2 = JSON.parse(response);
        if (data2.msg === "SUCCESS") {
          createMealTable2(data2.meal);
        } else {
          console.log(data2.msg);
        }
      },
      error: function(err) {
        alert(err);
      }
    });
  })
})

<button type="button" id="breakfast2">Breakfast</button>
<table id="mealTableContainer2">
  <thead>
    <tr>
      <th id="mealname">Meal Name</th>
      <th id="mealcalories">Calories</th>
      <th id="mealtype">Type of Meal</th>
    </tr>
  </thead>
  <tbody id="mealContainer2"></tbody>
</table>

Answer 4

您需要一个事件侦听器来侦听点击，而不是使用异步 function 调用您的数据库。返回答案后，只需使用 createElement 或已存在的 html 元素的内部文本将其放在页面上。