如何在不重新加载页面的情况下将任意 JSON 发送到 node.js？

Question

我的最终目标是在单击按钮时向 node.js 发送任意 JSON。我目前只知道如何从表单发送输入。这是我整理的一些用于发送表单信息的代码：

function postForm() {
  $('form').submit(function(e) {
    e.preventDefault(); // no page reload
    $.post(
      $(this).attr('action'),
      $(this).serialize(),
      function(data) { console.log('Code for handling response here.') },
     'json'
    );
  });
}

HTML 的样子：

<form action='/send' method='post'>
  <input name= "foo" type="radio" value=1>
  <input type="submit" value="Submit">
</form>

而相关的 express/node.js 代码如下：

app.post('/send', function(request, response) {
  fs.appendFile('test.txt', JSON.stringify(request.body) + '\n', function(e) {
    if(e) throw e;
    console.log(request.body);
  });
});

但是，我不知道如何调整此示例以使用不是来自表单输入的数据。为了提供上下文，我正在构建一个基于 Web 的用户研究，并且我想将收集到的有关用户的各种信息发送到 node.js。我已经尝试了表单提交的各种变体，但我的尝试都没有成功。我的印象是我可以将$(this).serialize() 换成客户端可以访问的任何其他数据，但我无法让这种思路发挥作用。我还尝试更改许多 .ajax() 示例中的一些示例，但这些示例总是重定向页面，这是不可取的，因为如果页面刷新，我的研究将丢失用户状态信息。

我已经完成了大量的客户端和服务器端编程，但我对 ajax 的工作原理几乎一无所知，这证明解决这个问题相当有问题！而且也很愚蠢，因为很多时候，这就是将两者粘合在一起的原因:)

Answer 1

由于您使用的是 jQuery，因此发送数据很简单 – 从按钮的 click 处理程序调用 $.post(url, data)：

$('#somebutton').click(function() {
    var data = { key: 'value', ... };
    $.post('/send', data, function(res) {
        // success callback
    });
});

浏览器将POST 到url，并带有一个data 参数的URL 编码序列化。

POST /send HTTP/1.1
Content-Type: application/x-www-form-urlencoded
...

key=value&...

哪个快递'bodyParser 不会有问题。或者，您可以告诉 jQuery 发送 data 的 JSON 序列化：

$.post('/send', data, function(res) {}, 'json');

在您的情况下，jQuery 如何传输数据（URL 编码或 JSON）并不重要，因为 bodyParser 会自动反序列化这两种格式。