patidar patidar - 5 months ago 13
Ajax Question

How to properly use AJAX with express

I have created a udp client in node js that sends a udp packet every 10 seconds. I want to use ajax that will create a refresh button and the client can get the newest message from udp when the button is pressed. below is what i have so far. any help would be nice, let me know if this is confusing

node js

app.post('/output2', function(req, res) {
var timesRun = 0;
var requestLoop = setInterval(function(){
timesRun += 1;
if(timesRun === 30){
clearInterval(requestLoop);
}
var HOST= 192.168.0.136;
var PORT= 69;
//Reading in the user's command, converting to hex
var message = new Buffer(42, 'hex');

//Sends packets to TFTP

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


client.on('message', function (message) {
res.render('index3', {val: message.toString()});
});

});


ejs

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

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

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

</body>
</html>


ajax

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


I can get the current message right now but when i press refresh it does not update to new message. I know my mistake is probably in the ajax request but I do not know where to start to fix it.

Answer

Your ajax request isn't posting any data, so req.body is empty. Also, req.body.ip and req.body.port are not included automatically, so you have to send them with the response too. To get the host and IP, see this JSFiddle. You can use a form to get the values, create them yourself with a function, or even hard code them, but they have to be sent with the ajax request. Try formatting your request like this:

$(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);
    });
  });
})

Update:

From this SPO question : A host name is a combination of the name of your machine and a domain name (e.g. machinename.domain.com). The purpose of a host name is readability - it's much easier to remember than an IP address. All hostnames resolve to IP addresses, so in many instances they are talked about like they are interchangeable.

Number is whatever use as the value for number. You don't actually need to send any data if it's not necessary for the request you can just use an empty object {} (although then you should probably use a get request if that's the case). I'm not sure why you want the host and ip, I included them because they were in your original code, I assumed they were used for something not included with the snippet. If you don't need them they're not required.

You don't need to turn the keys into strings, but it won't hurt anything. Both 'number' and number will work. They just become the keys in your req.body and any other keys will return undefined. In the example above your req.body would be an object like this:

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

Then in your route req.body.number === 42, req.body.host === theValueOfSomeVar, req.body.ip === theValueOf$('#someInput').val() and req.body.anyOtherKey === undefined

Comments