【问题标题】:Simple button click example with Ajax and Node.js?使用 Ajax 和 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 方法是否正在完成?

标签: javascript ajax node.js express


【解决方案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 数据
猜你喜欢
  • 2012-05-21
  • 2016-03-02
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-06-16
相关资源
最近更新 更多