用于发送发布请求以从表中的 .json 检索信息的 Html 按钮答案

【问题标题】：Html button to send a post request to retrieve information from .json in a table用于发送发布请求以从表中的 .json 检索信息的 Html 按钮
【发布时间】：2017-03-14 05:41:28
【问题描述】：

我有一个简单的 html 文件，其中有一个名为 Display Animal 的按钮。我有一个单独的 .json 文件，其中以某种方式存储了各种动物。我想要做的是点击显示动物我想从这个 json 文件中获取信息并将其显示在屏幕上的表格中。我正在使用 Express、Node、jQuery 和 Javascript。请注意，我正在运行显示简单 html 文件的服务器。我不太确定如何做到这一点的结构？就像在我的 html 文件中一样，我的 onClick 方法是在那里还是在我的服务器文件中？另外，我如何获取这些信息？我正在尝试使用 GET 或 POST 请求来完成此操作。

【问题讨论】：

标签： javascript html json node.js express

【解决方案1】：

您是在使用前端库（如 jQuery 或 Angular）还是尝试使用 JavaScript 在本机上执行此操作？

如果是前者，则每个都内置了 HTTP 请求 API（例如 jQuery.POST() 或 $http）。如果是后者，您需要查看原生 XMLHttpRequest。

不是一个复杂的答案，但您的问题非常广泛。我将把阅读文档留给你。

【讨论】：

我使用的是 jQuery，而不是 Angular。虽然我只喜欢 JavaScript。我对 jQuery 没有太多经验。

【解决方案2】：

在您的后端创建一个 get 服务，使用 express 会类似于

var app = express();

app.get ('/animals', function (req, res){ 
// your code to parse and return your list of animals, function (err, data) {
res.end (data) }

这不是 100% 有效的代码，但可以让您了解 get 的格式。

然后您可以使用 jquery.get() 与您的按钮 onclick 或写出一个 javascript xmlhttprequest。

Jquery 会更容易，但如果你想自己做，有大量关于用 javascript 编写 xhr 的教程。

编辑：我写这个是为了响应一个获取请求。如果你想使用 post 它本质上是相同的，使用 jquery.post () 作为另一个答案所建议的，而不是 app.get 它将是 app.post。

对于我使用 get 的动物等数据，您只显示信息而无需更改它，除非您传递敏感信息，否则 get 将很好地满足您的目的。

【讨论】：