将 JQuery ajax 调用转换为 vanilla Javascript - 无法发布 /public/ 错误

Question

所以这是对我昨天提出的问题 (Update HTML input value in node.js without changing pages) 的轻微跟进，我正在尝试提交 HTML 表单，向提供两个数字的服务器发送 ajax 请求，这些数字被添加到服务器，然后显示在与表单相同的 HTML 页面上的框中。到目前为止，我收到了一个非常有用的 JQuery 解决方案，但是我的经理出于各种原因希望它在 javascript 中完成。到目前为止，我已经尝试过了，但是由于很多人为此使用 JQuery，因此普通 javascript 方法的示例很少而且相差甚远。目前，在提交时会抛出一个页面，上面写着“无法发布 /public/”，我是 ajax 新手，所以我有理由确定问题就在那里。

我的（工作）JQuery 代码：

$(document).ready(function(){
  $("#add").submit(function(event){
    event.preventDefault();
    var num1 = $("#numa").val();
    var num2 = $("#numb").val();
    $.ajax({
      method: "post",
      url: '/add',
      data: JSON.stringify({ num1: num1, num2: num2 }),
      contentType: 'application/json',
      success: function(data){
        $("#answer").val(data);
      }
    })
  })
})

我尝试转换为 javascript：

function add(){
  var xml = new XMLHttpRequest();
  var num1 = document.getElementById("numa");
  var num2 = document.getElementById("numb");
  xml.open("POST", "/add", true);
  xml.setRequestHeader("Content-Type", "application/json");
  xml.onreadystatechange = function(){
    if(xml.readyState == XMLHttpRequest.DONE){
      document.getElementById("answer").value = xml.responseText;
    }
  }
  xml.send(JSON.stringify({num1: num1, num2: num2}));
}

我的 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(bodyParser.json());

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.num1);
  var b = parseFloat(req.body.num2);
  var sum = a+ b;
  res.send(sum.toString());
});

var server = app.listen(app.get('port'), function(){
  var port = server.address().port;

});

为了完成，我的 HTML 表单：

<form id="add" 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" onclick="add()"/>
</form>

任何指针都会很棒，谢谢！

Answer 1

除了这两行之外，一切看起来都不错：

var num1 = getElementById("numa");
var num2 = getElementById("numb");

应该是这样的

var num1  = document.getElementById("numa");
var num2  = document.getElementById("numb");

注意：更新的 html 代码（在表单中添加 onsubmit 并从按钮中删除）

<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>