Question

我有一个带有index.js的快速应用程序，其中包含以下内容：

<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路由），然后处理结果。

＆＃39; AJAX通话＆＃39;是异步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对象我们假设您的服务器地址是＆＃39; http://your.server＆＃39;。创建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，因为实际上它不需要名称）只会记录结果。

希望它有所帮助，

祝你好运

如何使用ExpressJS从html按钮（不是表单）调用服务器端功能

1 个答案: