如何正确使用 AJAX with express

How to properly use AJAX with express

我在 node js 中创建了一个 udp 客户端,它每 10 秒发送一个 udp 数据包。我想使用 ajax 来创建一个刷新按钮,当按下按钮时,客户端可以从 udp 获取最新消息。以下是我到目前为止所拥有的。任何帮助都会很好,如果这令人困惑,请告诉我

节点js

var PORT = 69;
var HOST = '192.168.0.136';
var dgram = require('dgram');
var message = new Buffer('10');

var client = dgram.createSocket('udp4');

setInterval(function() {
client.send(message, 0, message.length, PORT, HOST, function(err, bytes) {
  if (err) throw err;

});

},10000);

client.on('message', function (message) {
    var data= message.toString();
    console.log(data);
app.get('/', function(req, res) {
    //render index.ejs file
    res.render('index', {val:data});
});


app.get('/ajax', function(req, res) {
    res.send(data);
});

});

app.listen(3000, function(){
  console.log('listening on *:3000');
});

html

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="/public/request.js"></script>
</head>
<body>

<h1>Val: <span id="val"><%=val%></span></h1>

<button id="loadRequest">Refresh</button>

</body>
</html>

js $(函数() { $('#loadRequest').click(函数() { $.get('/ajax', 函数(res) { $('#val').append(res); }); }); });

我现在可以获取当前消息,但是当我按刷新时它不会更新为新消息。我知道我的错误可能在 ajax 请求中,但我不知道从哪里开始修复它。

您的 ajax 请求未发布任何数据,因此 req.body 为空。此外,req.body.ipreq.body.port 不会自动包含在内,因此您也必须将它们与响应一起发送。要获取主机和 IP,请参阅此 JSFiddle。您可以使用表单获取值,使用函数自己创建它们,甚至对它们进行硬编码,但它们必须与 ajax 请求一起发送。尝试像这样格式化您的请求:

$(function() {
  $('#loadRequest').click(function() {
    $.post('/output2', {
      number: 42, //post a hard coded value
      host: someVar, //post the value from a variable you create
      ip: $('#someInput').val() //post the value from a input
    }, function(res) {
      $('#val').text(res);
    });
  });
})

更新:

由此 SPO question : 主机名是您的机器名称和域名的组合(例如 machinename.domain.com)。主机名的目的是可读性——它比 IP 地址更容易记住。所有主机名都解析为 IP 地址,因此在许多情况下,它们被认为是可以互换的。

数字是作为数字值的任何用途。如果请求不需要发送任何数据,您实际上不需要发送任何数据,您可以只使用一个空对象 {} (尽管如果是这种情况,您可能应该使用 get 请求)。我不确定您为什么需要主机和 ip,我将它们包括在内是因为它们在您的原始代码中,我假设它们用于代码段中未包含的内容。如果您不需要它们,则不需要它们。

您不需要将键转换为字符串,但不会有任何坏处。 'number'number 都可以。它们只是成为您 req.body 中的键,而任何其他键将成为 return undefined。在上面的示例中,您的 req.body 将是这样的对象:

{
 number: 42,
 host: theValueOfSomeVar, //if you send a variable it sends the value, not the variable itself
 ip: theValueOf$('#someInput').val()
}

然后在你的路线 req.body.number === 42req.body.host === theValueOfSomeVarreq.body.ip === theValueOf$('#someInput').val()req.body.anyOtherKey === undefined

我不是 100% 确定这会奏效,但我认为是这样...与其呈现数据并在每条消息上发送它,不如进行 30 次调用并将每条消息推送到一个数组中,然后将数组发送到前端并使用 jQuery 在成功回调中每 10 秒添加一条消息。

新的Node.js代码(client.on):

app.post('/output2', function(req, res) {
  let HOST = 192.168.0.136;
  let PORT = 69;
  //Reading in the user's command, converting to hex
  let message = Buffer.from(42, 'hex'); //new Buffer(str[, encoding]) is deprecated

  //Sends packets to TFTP

  client.send(message, 0, message.length, PORT, HOST, function(err, bytes) {
    if (err) throw err;
  });

  client.on('message', function(message) {
    let msg = new Buffer(message, 'hex');
    res.send(msg);
  });
});

新新jQuery:

$(function() {
  $('#loadRequest').click(function() {
    var count = 0;
    var requestLoop = setInterval(function() {
      $.post('/output2', {
        number: 42, //post a hard coded value
        host: someVar, //post the value from a variable you create
        ip: $('#someInput').val() //post the value from a input
      }, function(res) {
        $('#val').append(res);
      });

      count++;
      if (count >= 30) {
        clearInterval(requestLoop);
      }
    }, 10000);

  });
})