Javascript 使用jQuery在POST中传递html表

我有一个html页面，我需要在帖子中发送一个表的内容。 如何使用jQuery捕获表的内容并将其传递给服务器（运行node.js和express.js）？ 这是页面中表格的示例：

试验
1.
2.
3.
4.
5.
6.

您希望发送一个POST请求，并将body设置为

$（“#horarios'）.html（）

你可以用它来做这个

其中，

data

是表的html字符串，

success

是服务器发送成功响应时的回调，

resType

是服务器应发送回的数据类型（即文本、html、xml、json、脚本）

因此，对于您的示例，请尝试在html页面的脚本标记中添加以下内容：

// bind to form submit
$('form').submit(function(){

  // get table html
  var table = {html: $('#horarios').html()};

  // POST the data
  $.post('/mypage', table, function(response, textStatus){
    // do anything with the response here ...

  })
});

---

您想发送一个POST请求，其正文设置为

$（'#horarios'）.html（）

你可以用它来做这个

其中，

data

是表的html字符串，

success

是服务器发送成功响应时的回调，

resType

是服务器应发送回的数据类型（即文本、html、xml、json、脚本）

因此，对于您的示例，请尝试在html页面的脚本标记中添加以下内容：

// bind to form submit
$('form').submit(function(){

  // get table html
  var table = {html: $('#horarios').html()};

  // POST the data
  $.post('/mypage', table, function(response, textStatus){
    // do anything with the response here ...

  })
});

---

您需要将表转换为数据结构。您可以通过以下方式实现这一点：

 var tbl = $('#horarios tr').map(function(rowIdx, row) {
        var rowObj = $(row).find('td').map(function(cellIdx, cell) {
            var retVal = {};
            retVal['cell' + cellIdx] = cell.textContent.trim();
            return retVal;
        }).get();
        var retVal = {};
        retVal['row' + rowIdx] = rowObj;
        return retVal;
  }).get();

通过这种方式，您将以单元格行数组的形式传递该表

$（'input[value=“Save”]”）。在（'click'，函数（e）{
//
//防止表格提交
//
e、 预防默认值（）；
//
//按X列收集表数据
//
var tbl=$（'#horarios tr'）.map（函数（rowIdx，row）{
var rowObj=$（行）.find（'td'）.map（函数（cellIdx，cell）{
var retVal={}；
retVal['cell'+cellIdx]=cell.textContent.trim（）；
返回返回；
}).get（）；
var retVal={}；
retVal['row'+rowIdx]=rowObj；
返回返回；
}).get（）；
log（'-->'+JSON.stringify（{table:tbl}））；
$.post（'/mypage'，{table:tbl}，函数（数据，textStatus，jqXHR）{
console.log（'success'）；
})
})

1.
2.
3.
4.
5.
6.

您需要将表转换为数据结构。您可以通过以下方式实现这一点：

 var tbl = $('#horarios tr').map(function(rowIdx, row) {
        var rowObj = $(row).find('td').map(function(cellIdx, cell) {
            var retVal = {};
            retVal['cell' + cellIdx] = cell.textContent.trim();
            return retVal;
        }).get();
        var retVal = {};
        retVal['row' + rowIdx] = rowObj;
        return retVal;
  }).get();

通过这种方式，您将以单元格行数组的形式传递该表

$（'input[value=“Save”]”）。在（'click'，函数（e）{
//
//防止表格提交
//
e、 预防默认值（）；
//
//按X列收集表数据
//
var tbl=$（'#horarios tr'）.map（函数（rowIdx，row）{
var rowObj=$（行）.find（'td'）.map（函数（cellIdx，cell）{
var retVal={}；
retVal['cell'+cellIdx]=cell.textContent.trim（）；
返回返回；
}).get（）；
var retVal={}；
retVal['row'+rowIdx]=rowObj；
返回返回；
}).get（）；
log（'-->'+JSON.stringify（{table:tbl}））；
$.post（'/mypage'，{table:tbl}，函数（数据，textStatus，jqXHR）{
console.log（'success'）；
})
})

1.
2.
3.
4.
5.
6.

如果希望通过post发送数据，首先必须从表中提取值，我建议将其放入数组，然后通过ajax post发送

$('form').on('submit', function(e) {
     e.preventDefault();
     var $dataElements = $('#horarios').find('td'),
      data = [];

    $.each($dataElements, function(i, elem){
        data.push($(elem).html());
    });

    $.ajax({url:'/mypage', method: 'POST', data: {data:JSON.stringify(data)}});
});

另一方面，如果您只想发送html，只需使用

$（'#horarios'）.html（）发送它，而不是遍历元素并将其添加到post数据中

我希望它有帮助……
如果您希望通过post发送数据，首先必须从表中提取值，我建议您将其放入数组中，然后通过ajax post发送

$('form').on('submit', function(e) {
     e.preventDefault();
     var $dataElements = $('#horarios').find('td'),
      data = [];

    $.each($dataElements, function(i, elem){
        data.push($(elem).html());
    });

    $.ajax({url:'/mypage', method: 'POST', data: {data:JSON.stringify(data)}});
});

另一方面，如果您只想发送html，只需使用
$（'#horarios'）.html（）发送它，而不是遍历元素并将其添加到post数据中

我希望它有助于…
捕获除了提交按钮之外，您的表单是空的确切内容？捕获除了提交按钮之外，您的表单是空的确切内容？在服务器上执行以下操作：app.post（'/mypage'，function（req，res）{var content=req.body；console.log（content）；}）；我只在控制台上得到“{}”。如何恢复表数据？您可能正在使用json解析器中间件。了解您的express应用程序设置在这个问题上是什么样子会很有帮助，但我认为这完全是一个单独的问题。事实上，我正在使用
主体解析器
<代码>var bodyParser=require（'body-parser'）；use（bodyParser.json（））；use（bodyParser.urlencoded（{extended:true}））也许我应该在发送之前将表转换为json对象？在服务器上执行时：app.post（'/mypage'，function（req，res）{var content=req.body；console.log（content）；}）；我只在控制台上得到“{}”。如何恢复表数据？您可能正在使用json解析器中间件。了解您的express应用程序设置在这个问题上是什么样子会很有帮助，但我认为这完全是一个单独的问题。事实上，我正在使用
主体解析器
<代码>var bodyParser=require（'body-parser'）；use（bodyParser.json（））；use（bodyParser.urlencoded（{extended:true}））
也许我应该在发送之前将表转换为json对象？我认为
$.ajax
行末尾缺少一个
}
。如何在服务器端恢复
数据
？尝试了
console.log（req.body）
，但我只得到
{}
作为响应。@PauloS.Abreu您是对的，我已经更新了代码。我的方法对您有帮助吗？我认为
$.ajax
行末尾缺少一个
}
。如何在服务器端恢复
数据
？尝试了
console.log（req.body）
，但我只得到
{}
a