Baner Baner - 4 months ago 17
jQuery Question

How to send data to post method of node js using AJAX/jQuery?

index2.html

<html>
<head>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<img src="logo.png" alt="logo">
<ul>
<li><a href="/">Data</a></li>
<li><a class="active" href="/continuous">Continous Data</a></li>
<li><a href="/output">Output</a></li>
</ul>
</br> </br>
<div>
<form action="/output2" method="post" >
<br/>
<label style="display: inline" >Enter Command: </label>
<input type="number" name="number" id="number" >
</br></br>
<button name="submit" value= "continuous" >Continuous</button>
</form>
</div>
</body>
</html>


index. html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="/public/request.js"></script>
</head>
<body>
<img src="logo.png" alt="logo">
<div1 id='myDiv'>
<ul>
<li><a href="/">Data</a></li>
<li><a href="/continuous">Continous Data</a></li>
<li><a class="active" href="/output">Output</a></li>
</ul>
</br></br>
<h4>You are connected to: 192.168.0.136:69</h4>
<h4>Output is: <span id="val"><%=val%></span></h4>
<button id="loadRequest">Refresh</button>
</br> </br>
</div1>
</body>
</html>


NODE js- get and post methods

app.get('/', function(req, res){
var html = fs.readFileSync('index2.html');
res.writeHead(200, {'Content-Type': 'text/html'});
res.end(html);
});
app.post('/output2', function(req, res){
//Send UDP packet continuously every ten seconds
var HOST= '192.168.0.136';
var PORT= 69;
var number= req.body.number;
//Reading in the user's command, converting to hex
var message = new Buffer(number, 'hex');

//Sends packets to UDP

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


client.once('message', function (message) {
var val = message.toString();
console.log(val);
res.render('index', {val:val});
});
});


request

$(function() {
$('#loadRequest').click(function() {
$.post('/output2',function(res) {
$('#myDiv').html(res);
});
});
});


I have a udp server that sends back different message each time a message is sent to it. If i hard code the message into the var message, then everything works. But i want the client to able to manually type in a message, then when the refresh button is pressed, the ajax re sends that same inputted message again. Right now, nothing happens when the button is pressed because ajax doesn't know what req.body.number is.

Answer

You can use jQuery's $.post() method to send a json object, or you can url encode parameters:

JSON:

$.post('/output2', {number: 'value1'}, function(data){
    // Do things
});

URL:

$.post('/output2?number=value1', function(data){
    // Do things
});

To receive these parameters on your post route you can use the req.body variable:

app.post('/output2', function(req, res){
    var number = req.body.number;
    // Do things
});

The way you have your form set up you don't really need jQuery post method to do this. If you did want a full jQuery submission though, add this to your index2.html.

<script>

$(function(){
    $(document).on('submit', 'form', function(e){
        e.preventDefault();
        var formdata = { number: $('input[name="number"]').val() };
        $.post('/output2', formdata, function(data){
            alert(data);
        });
    });
});

</script>
Comments