在不更改页面的情况下更新node.js中的HTML输入值
[英]Update HTML input value in node.js without changing pages
问题描述
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. 
我的目的是创建一个HTML表单，当您提交2个数字时，它们将被添加到node.js的服务器端，并且答案将显示在同一HTML页面的只读输入字段中。 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: 我当前的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: 我的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. 谢谢。
3 个解决方案
解决方案1
1 已采纳 2017-07-20 16:06:52
Use Jquery Ajax on client side bodyParser on server side: 在服务器端的客户端bodyParser上使用Jquery Ajax：
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());
})
解决方案2
0 2017-07-20 15:22:29
Use client side JavaScript to perform an action when the submit button is clicked and have it retrieve the value rather than redirecting to the /add page. 单击提交按钮时，使用客户端JavaScript执行操作，使它检索值，而不是重定向到/add页面。 The following being the general idea: 以下是总体思路：
$("submit").onClick(function(){
$.get("/add", {numa: a, numb: b}, function(err, response, body){
$("answer").val = body;
});
});
解决方案3
0 2017-07-22 07:02:24
please check below for your fix https://stackoverflow.com/a/45235894/3490058 请在下面检查您的修复程序https://stackoverflow.com/a/45235894/3490058
in short you have to disable automatic (native) form submission which you can do by adding onsubmit event and removing button click event as it'll submit your form and give you error from nodejs. 简而言之，您必须禁用自动（本机）表单提交，这可以通过添加onsubmit事件和删除按钮单击事件来完成，因为它将提交您的表单并为您带来nodejs错误。
<form id="add" method="post" onsubmit="return add()">
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.