如何使用 ExpressJS 从 html 按钮（不在表单中）调用服务器端函数

Question

我有一个带有 index.js 的 express 应用程序，它具有以下内容：

<form method="post" action="searchAll">
    <input type="text" name="keyword"/>
    <button type="submit">Submit</button>
</form>

这个功能很好，它是一个表单，它接受一个关键字并搜索我的数据库，然后跟进结果的 POST。

但是我可以有这样的按钮吗：

<button id="refreshDB">REFRESH DATABASE</button></br>

除了调用服务器端函数之外，它不会向服务器发送任何数据？该函数（位于服务器上的 app.js 或 db.js 中）不接受任何参数并且不跟进发布请求。我的想法如下：

<button id="refreshDB">REFRESH DATABASE</button>
<script>
    var button = document.getElementById('refreshDB');
    button.addEventListener('click', function() {

    // SOMEHOW TELL SERVER TO RUN FUNCTION
    // similar to the html <form method="post" action="refreshDB">?

    });
</script>

我知道我错过了一些非常基本的东西。我对路由有基本的了解，但不知道如何使用一个来进行简单的单向函数调用。我找到的所有帮助通常使用表单来提交数据。 ExpressJS 文档很有帮助，但是当涉及到这样的路由时，我只能找到服务器端代码。

This 流行的问题是在问类似的问题，但答案使用了一种形式。

可以帮助确定我缺少什么基本的“东西”吗？谢谢！

Answer 1

您需要对服务器进行 AJAX 调用（API 路由），然后处理结果。

“AJAX 调用”是一个异步 HTTP 请求，这意味着您无需重新加载页面即可获得请求的响应（与 form 标记不同）。

进行 AJAX 调用

Javascript（纯/香草）[在客户端]

function myAjaxCall(url, data, callback) {
  var req = new XMLHttpRequest();
  req.open("POST", url, true);
  req.send(data);
  req.onload = function(e) {
    if (this.status == 200) { // if the HTTP response code is 200 (OK)
      callback(e.responseText); // passing the result of the request to the callback function 
    }
  };
}

JQuery [在客户端]

$.ajax({
  method: "POST",
  url: "http://your.server/route/url",
  data: "The data you want to send to your server"
}).done(function(res) {
  console.log(res); // the value returned by the server (deal with it)
});

编辑：使用按钮 [ON THE CLIENT SIDE] 使其工作

var yourData = "The data you want to send to your server";
var url = "http://your.server/route/url";

var button = document.getElementById('refreshDB');
button.onclick = function(e) { // (almost the) same as addEventListener
  myAjaxCall(url, yourData, function uselessName(result) {
    console.log(result);
  });
}

使用 Express 和 Nodejs [在服务器端] 创建 API 路由

我假设你已经有一个 Express 服务器，所以你有 app 对象。
假设您的服务器地址是“http://your.server”。 创建 POST 路由的最简单方法（如果您正在构建一个大型应用程序则不是更好）如下：

app.post('/route/url', function(req, res) {
  console.log(req.body); // this will output "The data you want to send to your server"
  var data = yourFunction();
  res.status(200).send(data); // the status 200 is the default one, but this is how you can simply change it
})

编辑 - 这是实际发生的事情：

• 点击按钮，进入事件处理程序（onclick关键字后面的函数）
• 它使用函数myAjaxCall
• 此函数发出请求（Ajax 调用）
• req.onload 被调用（因为它接收到请求的响应，这意味着数据来自服务器）
• 我们使用传入参数的函数作为myAjaxCall函数的第三个参数，并将请求的结果作为参数传递
• 这个函数（命名为uselessName，因为实际上它不需要名称）只会记录结果。

希望对你有帮助，

最好的问候