Konvertieren von JQuery Ajax Aufruf zu Vanille Javascript - Kann nicht POST/public/Fehler

Question

Also dies ist ein leichtes Follow-up zu einer Frage, die ich gestern hatte (Update HTML input value in node.js without changing pages), ich versuche, ein HTML-Formular zu senden, senden Sie eine Ajax-Anfrage an meine Server, der zwei Nummern liefert, diese Nummern werden auf dem Server hinzugefügt und dann in einem Feld auf der gleichen HTML-Seite wie das Formular angezeigt. Bis jetzt habe ich eine Lösung in JQuery erhalten, die sehr nützlich war, aber mein Manager möchte es in Javascript aus verschiedenen Gründen. Ich habe es bisher versucht, aber da viele Leute JQuery dafür verwenden, gibt es nur wenige Beispiele für eine Vanilla-Javascript-Methode. Gegenwärtig wird beim Einsenden eine Seite mit der Aufschrift "Can not POST/public /" geworfen, ich bin neu bei Ajax, also bin ich ziemlich sicher, dass das Problem dort liegt.

Mein (Arbeits-) JQuery-Code:

$(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); 
 
     } 
 
    }) 
 
    }) 
 
})

Mein Versuch, Javascript, bei der Umwandlung von:

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})); 
 
}

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

 
});

Zur Vervollständigung meiner HTML-Formular:

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

Alle Zeiger wäre toll, danke!

Answer 1

sieht alles gut, außer den zwei Linien:

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

es wie dieser

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

Hinweis sein sollte: aktualisierte HTML-Code (in Form und entfernt von Button hinzugefügt 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>