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

时间:2012-12-04 20:25:03

标签: ajax node.js jquery express

我的最终目标是在单击按钮时向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是如何工作的,这对于解决这个问题来说证明是有问题的!而且相当愚蠢,因为往往是将两者粘在一起的原因:)

1 个答案:

答案 0 :(得分:6)

由于你正在使用jQuery,发送数据很简单 - 从按钮的click处理程序调用{​​{3}}:

$('#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会自动反序列化两种格式。