如何正确使用 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.ip
和 req.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 === 42
、req.body.host === theValueOfSomeVar
、req.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);
});
})
我在 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.ip
和 req.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 === 42
、req.body.host === theValueOfSomeVar
、req.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);
});
})