向nodejs提交表格答案

【问题标题】：Submit a table to nodejs向nodejs提交表格
【发布时间】：2020-09-02 09:35:04
【问题描述】：

我正在尝试向我的 nodejs 服务器发送一个可编辑的表，但响应是“未定义”。我该如何解决这个问题？

我的所有表单元素都被解析了，除了表格。

服务器报告如下：

动态表：未定义 ::1 - POST /creat_xml HTTP/1.1 200 - - 29.117 毫秒

下面是带有表格的 HTML 表单，以及服务器的代码。

<form id="msform" class="form" action="/creat_xml" method="POST">

  <table
    class="table table-bordered table-striped table-hover table-condensed  text-center"
    id="DyanmicTable" name="DyanmicTable">
    <thead>
    <tr>
      <th class="text-center">Repère</th>
      <th class="text-center">Quantité</th>
      <th class="text-center">Segments</th>
      <th class="text-center">Fixations latérales</th>
      <th class="text-center">Dalle à gauche</th>
      <th class="text-center">Commentaires</th>
      <th class="text-center">
        <button id="addNewRow" class="waves-effect waves-light btn">Ajouter une
          ligne
        </button>

      </th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    </tbody>
  </table>
  <script>
    $('#DyanmicTable').SetEditable({ $addButton: $('#addNewRow') });
  </script>
  <input type="button" name="previous" class="previous action-button"
         value="Précédent"/>
  <input type="submit" name="submit" class="submit action-button"/>

</form>

和我的服务器：

const express = require('express');
const app = express();
const morgan = require('morgan');
const bodyparser = require('body-parser');

app.use(bodyparser.urlencoded({ extended: false }));
app.use(express.static('public'));
app.use(morgan('short'));

app.post('/creat_xml', (req, res) => {
  console.log('DyanmicTable: ' + req.body.DyanmicTable);
  res.json();
});

//localhost:8080
app.listen(8080, () => {
  console.log('server lancé! ecoute du port 8080...');
});

【问题讨论】：

那里没有可以触发任何类型的 HTTP 请求的代码。您应该提供minimal reproducible example。
嗨@Quentin 我刚刚编辑了帖子
HTML 无效，您没有将可编辑表格转换为表单控件的代码。
表格在表格中，我像其他输入一样使用“名称”属性（DynamicTable）（不在此代码中）。我可以获取除了未定义的表之外的所有输入值
<table> 元素没有 name 属性。表格不是输入。你应该使用a validator。

标签： javascript html node.js express body-parser

【解决方案1】：

表格不是表单元素，因此在提交表单时会被忽略。

通过<form> 提交发送的唯一元素是：

<button>
<fieldset>
<input>
<object>
<output>
<select>
<textarea>

如果您想提交表格的内容，并且不想编写自定义提交函数，请在表格单元格中包含 <input> 元素并为每个输入指定一个唯一名称：

<tr>
  <td><input name="col1" /></td>
  <td><input name="col2" /></td>
  <td><input name="col3" /></td>
  <td><input name="col4" /></td>
  <td><input name="col5" /></td>
  <td><input name="col6" /></td>
</tr>

【讨论】：

嗨@Terrymorse 谢谢你的解释。在输入中转换单元格的想法不起作用:(我会尝试另一种方法谢谢你的回答
@SaifEjjilali 为什么<td><input></td> 不起作用？如果您提供比“不工作”更多的细节，那么有人可以提供解决方案。

【解决方案2】：

这是我按照你告诉我的修改的 html 以及我用来发布表单的脚本

<script> 
$('#msform').submit( function(e ) {
  e.preventDefault();
  var col1 = $('#col1').val();
  var col2 = $('#col2').val();
  var col3 = $('#col3').val();
  var col4 = $('#col4').val();
  var col5 = $('#col5').val();
  var col6 = $('#col6').val();

  $.ajax({
method: 'POST',
url: '/creat_xml',
data: {     
        col1,
        col2,
        col3,
        col4,
        col5,
        col6,     
},
success: (res)=>{
console.log(res);
}
}); 
});    
 </script>

服务器端我的代码获取表单输入：

app.post("/creat_xml", (req, res) => {
  console.log("Création formulaire en cours...")
   console.log("col1: " + req.body.col1)
   console.log("col2: " + req.body.col2)
   console.log("col3: " + req.body.col3)
   console.log("col4: " + req.body.col4)
   console.log("col5: " + req.body.col5)
   console.log("col6: " + req.body.col6)
  res.send()

})

结果仍未定义

【讨论】：