javascript - 如何使用 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 中)不带任何参数，并且不会跟进 post 请求。我的想法如下:

<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)
});

编辑:使其与按钮一起使用 [在客户端]

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 因为实际上它不需要名称)只会记录结果。

希望对你有帮助

致以诚挚的问候