javascript - 通过 post 将 DOM 元素的内容发送到服务器

标签 javascript jquery

我想向服务器发送一个表格,并让它返回一个 csv 文件。 我认为做到这一点的唯一方法是将表格内容放入隐藏的表单元素中并将其提交给服务器。

<form id='csvForm' method="POST" action="makeCSV.php">
  <input type='hidden' name='content' value='' />
</form>

<input type='button' id='generateCSV' value='CSV' />

<table id='myTable'>
  <tr>
    <td>this is a test</td>
  </tr>
</table>

<script>
$('#generateCSV').on('click', function(){
  // ?????
  $('#csvForm').submit();
});
</script>

我不确定在问号行需要做什么才能将 html 放入隐藏的表单元素中。我假设我需要以某种方式转义 html dom。

最佳答案

没有办法最终解析出 HTML,但您确实有一些能力来决定是在服务器端还是在客户端执行此操作。

如果你想延迟到服务器端解析,将document.getElementById('myTable').outerHTML放入隐藏字段。这会将一团文本传递给服务器,该文本将是表格 DOM 的 HTML 表示形式。我说“表格 DOM 的 HTML 表示”是因为它可能与页面上的 HTML 代码完全相同,但它至少应该在语义上等同于该代码(加上您所做的任何更改可能是通过 JavaScript 在 DOM 中创建的)。在服务器端,您将通过某种解析器运行此文本,提取数据,并将其放入 CSV 中以返回。

您还可以在客户端解析表格,也许使用类似于访问者模式的东西来遍历表格的 DOM 并构建不同的数据结构。。这是非常重要的事情,但它可以通过以更紧凑且易于解析的形式传输数据来为您节省一些带宽和服务器负载。您甚至可以将其作为 CSV 传递,这样服务器就根本不需要在格式之间转换数据;根据您需要对数据执行的其他操作,这可能会让您完全切断 AJAX 调用。

关于javascript - 通过 post 将 DOM 元素的内容发送到服务器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29145397/

相关文章:

单击后将 Javascript var 转换为 php

javascript - 在单页应用程序中上传文件

javascript - 一旦满足特定条件就停止动画 - Jquery

javascript - 带有模态、验证器和电子邮件的 Bootstrap 表单

javascript - 如何在 IE 10/11 中可靠地将 XML 转换为字符串?

javascript - AngularJS - 哪个范围在性能方面更好? Object.key 还是一些变量?

c# - 如何根据 ViewBag 中包含列表的元素显示文本框

jquery - 使用 jQuery 从 Flickr 获取图像的高度而不加载图像文件?

javascript - 选择 2 JS - 忽略 HTML 标记

javascript - 为什么这个 javascript 函数没有定义?