Question

我目前正在创建一个简单的基于Web的数据可视化工具。我基本上希望能够将用户选择发送到服务器（我使用express创建）来查询数据库。问题是我不知道如何将数据发送到服务器然后在另一端接收它以便执行此操作。

我想通过点击按钮

将数据发送到服务器

var data = {
    Admission_type: "";
    Gender: "";
    Max_age: 89,
    Min_age: 0
};

$( "#PlotBtn" ).click(function() { 
   
});

Answer 1

将数据发送到服务器的最常见的vanilla方式是XMLHttpRequest (XHR)。看起来你正在尝试传递一个对象，而JSON可能是向服务器发送数据和从服务器发送数据的最灵活方式。因此，将数据发送到服务器的最简单的代码就像这样：

var xhr = new XMLHttpRequest; 
xhr.open("GET", "https://yourserver.domain.com/data"); 
xhr.send();

然而，这只会发送信息而无法处理响应。有很多方法可以解决这个问题，以及有关如何发送信息的许多选项，但这是获得响应所需的准系统。

xhr.onload = function(){
  console.log(xhr.response);
};

查看上面链接的文档，了解更多选项以及您可以收听的其他事件。

Answer 2

存在很多通过网络发送数据的方法。正如@Asinus所解释的，最常见的方式是使用XMLHttpRequest（又名xhr），但最现代的浏览器提供了更好的方法来实现目的。其中一个是Fetch API。它比它的前身xhr更强大！

我建议你看一下关于Fetch的blog post。这里是一个使用示例：

fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'get'
}).then(response => {
  console.log(response.json()); // Response, everything is fine
}).cath(err => {
  console.log(err); // Failure: an error occurred
});

在您的情况下，如果您要将数据发送到服务器，则必须POST请求为Restful。

从客户端向服务器端发送数据

2 个答案: