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

Posted 2023-03-07

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

【英文标题】：How do I send arbitrary JSON to node.js without a page reload?

【发布时间】：2012-11-22 13:44:50

【问题描述】：

我的最终目标是在单击按钮时向 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 的工作原理几乎一无所知，这证明解决这个问题相当有问题！而且也很愚蠢，因为很多时候，这就是将两者粘合在一起的原因:)

【问题讨论】：

使用 ajax 但不要删除表单标签。使用表单标签，您可以进行渐进式增强，这是一件好事。而是阅读 jquery 文档以了解如何防止默认。

@freakish：所有现代浏览器都可以通过禁用 javascript 配置为不支持 ajax。此外，您忘记了像我这样经常使用基于文本的浏览器（如 lynx）和没有内置 javascript 的链接的用户。此外，从什么时候开始最佳实践是一件坏事？如果您的网站需要大量工作来支持渐进增强，这是一回事，如果它已经支持渐进增强并且有人完全破坏它，使其与非 js 浏览器不兼容，则完全是另一回事。

@freakish：你可能不在乎，但这并不意味着其他人不在乎。不要做假设。有些人需要为盲人用户提供服务，例如，他们主要使用基于文本的浏览器，而在盲人的文本阅读器中，很多人仍然不正确支持 JavaScript。您可能不需要支持盲人，但对于某些人来说这是法律要求的。

@freakish：我不同意那种仅仅因为它不酷而不支持的陈旧想法。我们有二十一世纪。建筑物现在可以支持残疾用户。如果一座 18 世纪的城堡不能支持残疾用户，那么我们应该升级他们。不要以牺牲可用性为代价降低现代建筑的外观。

@freakish：你的论点也不正确。我根本不是在谈论浏览器不兼容。我说的是语义网，它是网络架构中一个非常现代的概念。纯 javascript 内容破坏了语义网，这就是为什么它被认为是不好的做法。再举一个例子，即使你不关心盲人用户，很多客户（和老板）也关心搜索引擎。要让 Google 正确抓取您的网站，您需要支持非 ajax 版本。

【参考方案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 会自动反序列化这两种格式。

【讨论】：

太棒了！非常感谢 :) 很高兴它不需要大修。出于好奇，现在 jQuery 的 click 是否优于 HTML onClick？

是的，最好从脚本（无论是否为 jQuery）附加事件处理程序，而不是在 HTML 属性中内联脚本。 The W3C has further reading.

在express中添加一个接收数据的例子req.body会有数据传递给它。

@chovy：OP 已经发布的代码无需修改即可工作。

对不起，我在看答案。