使用 Ajax 和 Node.js 的简单按钮单击示例？

Posted 2023-03-07

【中文标题】使用 Ajax 和 Node.js 的简单按钮单击示例？

【英文标题】：Simple button click example with Ajax and Node.js?

【发布时间】：2015-01-25 07:32:36

【问题描述】：

我是 Ajax 和 Node.js + Express 的新手。在这一点上，我正在尝试弄清楚如何通过按钮与前端和后端进行通信。

我在 html 页面上有一个按钮，我想用它从后端调用一个函数并将文本输出到客户端。

这是我拼凑起来的我需要的东西，但我正在寻找一个关于如何做到这一点的例子。

这一切都发生在 /page

index.hjs 文件

<button class="btn btn-success" onclick="install()">Install</button>

// Client Side Ajax Script
<script>
    $('button').click(function () 
        $.post('/page', data: 'blah', function (data) 
        console.log(data);
      );
    , 'json');
</script>

app.js 文件

app.post('/page', function (req, res, next) 
  calling.aFunction();
  res.write('A message!');
);

这些是我需要的所有部分吗？需要编辑哪些部分才能使此功能正常工作？

【问题讨论】：

你试过了吗？有什么问题吗？

是的，我试过了，收到了错误Uncaught ReferenceError: install is not defined

这是因为 button 元素中的 onclick 属性有一些方法 install() 列出了你似乎不需要这个，因为你使用 jQuery 分配了一个点击事件处理程序

删除 install() 方法/函数似乎不能解决问题。错误现在消失了，但没有得到任何输出或任何东西。

我不知道您指的是什么问题，您只问您是否这样做。您是否有应包含的错误？您是否检查过您的网络监视器以查看 POST 方法是否正在完成？

【参考方案1】：

index.js

<button class="btn btn-success">Install</button>

// Client Side Ajax Script
<script>
    $('button').click(function () 
        $.post('/page', data: 'blah', function (data) 
        console.log(data);
      );
    , 'json');
</script>

app.js

app.post('/page', function (req, res) 
    calling.aFunction();
    res.send('A message!');
);

您应该会看到“一条消息！”在浏览器控制台中。

【讨论】：

我如何在 app.js 中获取 'blah' 数据？

不确定您所说的“废话”数据是什么意思。这只是我显示正在发送到发布目的地的有效负载的方式

抱歉，我的问题必须更具体一些：如果我还想使用 $.post 方法将数据从 index.js 传递回后端（app.js），我将如何去做？这不是 data: 'blah' 吗？在 app.post(... 我将如何从 req 中读取它？

req.body.data 将是“blah”

顺便说一句，我的最后一条评论假设您正在使用 express-bodyparser 来处理 POST 数据