我的目标是创建一个HTML表单，当您提交2个数字时，它们将被添加到node.js中的服务器端，并且答案将显示在同一HTML页面中的只读输入字段中。 目前，我的功能在单独的页面中输出答案 - 我不想重定向用户，只是在进行计算服务器端时在同一页面上显示答案。
我目前的app.js：
var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var app = express();
app.set('port', process.env.PORT || 8080);
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static(path.join(__dirname, '../static')));
app.get('/', function(req, res){
res.redirect('/public');
});
app.post('/add', function(req, res){
var a = parseFloat(req.body.numa);
var b = parseFloat(req.body.numb);
var sum = a+ b;
res.send('Sum: ' + sum);
});
var server = app.listen(app.get('port'), function(){
var port = server.address().port;
});
我的HTML：
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
</head>
<body onload="testFunc()">
<h1>Public page</h1>
<form action="/add" method="post">
Number 1:
<input type="number" name="numa" step="any"/><br>
Number 2:
<input type="number" name="numb" step="any"/><br>
<input type="number" name="answer" readonly/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
我已经浏览了其他帖子，但解决方案都是通过用哈巴狗或玉石来做的，有没有办法做到这一点没有？ 关于我应该采取什么方向的任何建议将不胜感激！ 谢谢。
My aim here is to create a HTML form that when you submit 2 numbers they are added together server side in node.js and the answer is displayed in a readonly input field in the same HTML page. At present, my function outputs the answer in a separate page- I don't want to redirect the user, just show the answer on the same page while doing the calculation server side.
My current app.js:
var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var app = express();
app.set('port', process.env.PORT || 8080);
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static(path.join(__dirname, '../static')));
app.get('/', function(req, res){
res.redirect('/public');
});
app.post('/add', function(req, res){
var a = parseFloat(req.body.numa);
var b = parseFloat(req.body.numb);
var sum = a+ b;
res.send('Sum: ' + sum);
});
var server = app.listen(app.get('port'), function(){
var port = server.address().port;
});
my HTML:
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
</head>
<body onload="testFunc()">
<h1>Public page</h1>
<form action="/add" method="post">
Number 1:
<input type="number" name="numa" step="any"/><br>
Number 2:
<input type="number" name="numb" step="any"/><br>
<input type="number" name="answer" readonly/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
I've looked through other posts but the solutions all work through doing it with pug or jade, is there any way to do this without? Any suggestions on what direction I should take would be appreciated! Thank you.
最满意答案
在服务器端的客户端bodyParser上使用Jquery Ajax：
客户端：
<form id="myForm" method="post">
Number 1:
<input type="number" id="numa" name="numa" step="any"/><br>
Number 2:
<input type="number" id="numb" name="numb" step="any"/><br>
<input type="number" id="answer" name="answer" readonly/>
<input type="submit" value="Submit"/>
</form>
<div id="result"></div>
<script>
$(document).ready(function(){
$("#myForm").submit(function(event){
event.preventDefault();
var num1 = $('#numa').val();
var num2 = $('#numb').val();
$.ajax({
method: 'post',
url: '/data',
data: JSON.stringify({ num1: num1, num2: num2 }),
contentType: 'application/json',
success: function(data) {
$('#answer').val(data);
}
})
});
});
</script>
和服务器端：
app.use(bodyParser.urlencoded({ // body-parser to
extended: true // parse data
})); //
app.use(bodyParser.json()); //
app.post('/data', function(req, res) {
var a = parseFloat(req.body.num1);
var b = parseFloat(req.body.num2);
res.send(sum.toString());
})
Use Jquery Ajax on client side bodyParser on server side:
Client side:
<form id="myForm" method="post">
Number 1:
<input type="number" id="numa" name="numa" step="any"/><br>
Number 2:
<input type="number" id="numb" name="numb" step="any"/><br>
<input type="number" id="answer" name="answer" readonly/>
<input type="submit" value="Submit"/>
</form>
<div id="result"></div>
<script>
$(document).ready(function(){
$("#myForm").submit(function(event){
event.preventDefault();
var num1 = $('#numa').val();
var num2 = $('#numb').val();
$.ajax({
method: 'post',
url: '/data',
data: JSON.stringify({ num1: num1, num2: num2 }),
contentType: 'application/json',
success: function(data) {
$('#answer').val(data);
}
})
});
});
</script>
And Server side:
app.use(bodyParser.urlencoded({ // body-parser to
extended: true // parse data
})); //
app.use(bodyParser.json()); //
app.post('/data', function(req, res) {
var a = parseFloat(req.body.num1);
var b = parseFloat(req.body.num2);
res.send(sum.toString());
})
更多推荐
发布评论