AJAX如何动态地将行添加到表中

Posted 2023-02-19

【中文标题】AJAX如何动态地将行添加到表中

【英文标题】：how can AJAX dynamically add rows to a table

【发布时间】：2021-10-07 18:44:58

【问题描述】：

我想知道是否有人可以帮助我弄清楚如何在数据库查询找到更多记录时使用 AJAX 动态地将行添加到以下 html 中。我正在使用 python flask 和 pandas 创建一个包含节点信息的数据框，例如节点何时处于活动状态，或处于睡眠模式，锁定或解锁。我在想我可以以某种方式传递该数据框并遍历它以创建一个包含该信息的表以及指向该特定节点的另一个页面的链接。现在，我想我有第一部分，当我第一次用所有记录的节点启动页面时，我正在发布页面。但我认为我也做错了那部分。我想我有两个问题：

如何将数据框传递给 html 并正确遍历它？

当任何其他节点注册时，我如何使用 AJAX 向表中添加另一行？我在想也许我在 POST 时将 nodeID 列表传递给 HTML，然后将 setInterval 传递给 python 烧瓶端，查询数据库，创建一个新列表并比较..删除我已经添加的那些，传递数据框那些对 AJAX 函数的新功能以及完整的 NodeID 列表......听起来对吗？

到目前为止，我只能通过 POST 解决这个问题，但不知道下一步该做什么：

HTML

    <div class="container">
      <h2>Incubator List</h2>
      <p>List of Registered Encubators:</p>            
      <table class="table table-dark table-striped">
        <thead>
          <tr>
            <th>NodeID</th>
            <th>Last Update</th>
            <th>Status</th>
            <th>  </th>
            <th>Control Link</th>
          </tr>
        </thead>
      % for node in nodes %
        <tr>
          <td> node.NodeID </td>
          <td> node.last_update </td>
          % if  node.Sleep  == "True" %
            <td><p class="bg-secondary text-white text-center">SLEEP</p>></td>
          % else %
            % if  node.Active  == "True" %
              <td><p class="bg-success text-white text-center">ACTIVE</p></td>
            % else %
              <td><p class="bg-danger text-white text-center">NOT ACTIVE</p>></td>
            % endif %
          % endif %
          % if  node.LOCK  == "True" %
            <i class="fas fa-lock"></i>
          % else %
            <i class="fas fa-unlock"></i>
          % endif %
          <td>
            <form action="/nodeslist" METHOD = "POST">
              <input type="hidden" id="NodeID" name="NodeID" value= node.NodeID >
              <input TYPE="SUBMIT" value="Access" class = "btn btn-success">
                </form>
          </td>
        </tr> 
      % endfor %
    </tbody>
  </table>
    </div>
<script>
    function UPDATEnodelist(nodeIDlist)  
        $.get('/nodeDHT?nodeIDlist ='+nodeIDlist , 
            function(data)
                const parsed = JSON.parse(data)
                nodeIDlist = parsed.nodeIDlist;
                something-pandas-dataframe-something;
            ;
        )
    ;

    setInterval(function () 
            UPDATEnodelist(nodeIDlist);
            return false;
    , 2500);
</script>
% endblock content %

蟒蛇烧瓶

@app.route('/nodeslist', methods=['POST','GET'])
def nodelist():
    df= DAO.Pull_Type_Nodes()
    if request.method == "POST":
        title='List of Registered Nodes')
        nodeIDlist = nodes.NodeID.unique()
        nodes = df.to_json(orient ='records')
        return render_template('nodeslist.html',title=title, nodes=nodes, nodeIDlist=nodeIDlist) 
    else:
        oldnodeIDlist = request.form['NodeID']
        add_df = df[~df['NodeID'].isin(oldnodeIDlist)]
        new_nodes = add_df.to_json(orient ='records')
        return new_nodes,nodeIDlist

任何帮助将不胜感激！

编辑：

响应应该是一个数据帧，包含字段“nodeID”、“睡眠”（布尔）、“锁定”（布尔）、“活动”（布尔）

【问题讨论】：

请在您的问题中添加响应结构。

响应结构？这不是我在 python 烧瓶部分下展示的部分吗？

检查共享答案是否符合您的要求

嗨，你能显示parsed变量的输出吗？只需执行console.log(parsed)，您就会在浏览器控制台中看到响应。

嘿抱歉我不得不去 TDY 并且错过了最后一周的工作。我会尽快得到这个日志打印输出。

【参考方案1】：

<table id="table" class="table table-dark table-striped">
  <thead>
    <tr>
      <th>NodeID</th>
      <th>Last Update</th>
      <th>Status</th>
      <th></th>
      <th>Control Link</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <form action="/nodeslist" METHOD="POST">
          <input type="hidden" id="NodeID" name="NodeID" value= node.NodeID >
          <input TYPE="SUBMIT" value="Access" class="btn btn-success" id="btn">
        </form>
      </td>
    </tr>
  </tbody>
</table>

const date = new Date();
const data = [...Array(10).keys()].map(id => 
  return 
    id: id+1,
    date: new Date((Math.random() * 10000000) + date.getTime()).toLocaleString(),
    status: Math.floor(Math.random() * 2),
  ;
);

const tbody = document.querySelector('#table').querySelector('tbody');

function test(evt) 
  evt.preventDefault();
  let fragment = document.createDocumentFragment();
  data.forEach(d => 
    let tr = document.createElement('tr');
    Object.keys(d).forEach(x => 
      let td = document.createElement('td');
      let textNode = document.createTextNode(d[x]);
      td.appendChild(textNode);
      tr.appendChild(td);
    )
    fragment.appendChild(tr);
  );
  tbody.appendChild(fragment);


document.querySelector('#btn').onclick = test;

在这里工作example