在不更改页面的情况下更新node.js中的HTML输入值 [英] Update HTML input value in node.js without changing pages
问题描述
我的目标是创建一个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（'端口'，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;}）;
p>
我的HTML：
<！DOCTYPE html>< HTML>< HEAD> < title> hello< / title>< / head>< body onload =testFunc（）> < h1>公开页面< / h1>< form action =/ addmethod =post>编号1：< input type =numbername =numastep =any/>< br> Number 2：< input type =numbername =numbstep =any/>< br> < input type =numbername =answer只读/> < input type =submitvalue =Submit/>< / form>< / body>< / html>
我已经浏览过其他文章，但解决方案都是通过使用帕格或玉来实现的，有没有办法做到这一点？任何建议我应该采取什么方向，将不胜感激！
在服务器端的客户端bodyParser上使用Jquery Ajax：
客户端：
< form id =myFormmethod =post>
编号1：
<输入类型=编号id =numaname =numastep =any/>< br>
Number 2：
< input type =numberid =answername =answerreadonly />
< input type =submitvalue =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'，
成功：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（））;
}）
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.
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());
})
这篇关于在不更改页面的情况下更新node.js中的HTML输入值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
