如何正确使用AJAX与express

时间:2016-06-28 17:19:59

标签: javascript html ajax node.js udp

我在节点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     $(function(){         $(&#39; #loadRequest&#39;)。click(function(){             $ .get(&#39; / ajax&#39;,function(res){                 $(&#39;#VAL&#39)附加(RES)。             });         });     });

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

1 个答案:

答案 0 :(得分:1)

您的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中的密钥,任何其他密钥都会返回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);

  });
})