轉換JQuery的AJAX調用香草的Javascript - 不能發佈/公/錯誤

Question

所以這是一個輕微的跟進一個問題，我昨天（Update HTML input value in node.js without changing pages）有，我試圖提交HTML表單，發送一個Ajax請求我服務器提供兩個數字，這些數字被添加到服務器上，然後顯示在與表單相同的HTML頁面上的一個框中。到目前爲止，我在JQuery中收到了一個非常有用的解決方案，但是由於各種原因，我的經理希望它在JavaScript中完成。我了個去，到目前爲止，但很多人使用JQuery爲此，香草的例子JavaScript方法是少之又少。目前，在提交頁面被拋出說「無法POST /公/」，我是新來的阿賈克斯，所以我有理由相信問題出在那裏。

我的（工作）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>