在不更改页面的情况下更新 node.js 中的 HTML 输入值答案

【问题标题】：Update HTML input value in node.js without changing pages在不更改页面的情况下更新 node.js 中的 HTML 输入值
【发布时间】：2017-12-26 09:17:19
【问题描述】：

我的目标是创建一个 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>

我浏览了其他帖子，但解决方案都是通过哈巴狗或玉石完成的，有没有办法做到这一点？任何关于我应该采取什么方向的建议将不胜感激！谢谢。

【问题讨论】：

如果您不想重定向，则必须使用 ajax，服务器端模板语言无济于事。

标签： javascript html node.js express

【解决方案1】：

使用客户端 JavaScript 在单击提交按钮时执行操作并让它检索值而不是重定向到 /add 页面。大致思路如下：

$("submit").onClick(function(){
    $.get("/add", {numa: a, numb: b}, function(err, response, body){
        $("answer").val = body;
    });
});

【讨论】：

这是保留在节点 js 文件中添加输入的 post 函数还是要在客户端完成？

【解决方案2】：

在服务器端的客户端 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());

})

【讨论】：

你有没有机会知道 vanilla javascript 中的等效语法，而不是 jquery？我到处都看了，但没有运气，如果你能指出我正确的方向那就太好了，否则还是谢谢！

【解决方案3】：

请检查下面的修复 https://stackoverflow.com/a/45235894/3490058

简而言之，您必须禁用自动（本机）表单提交，您可以通过添加 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>

【讨论】：