将jQuery ajax调用转换为vanilla Javascript – 不能POST / public / error
所以这是我昨天的一个问题的轻微后续（ 更新node.js中的HTMLinput值，而不改变页面 ），我试图提交一个HTML表单，发送一个Ajax请求到我的服务器，提供两个数字，这些号码被添加到服务器上，然后显示在与表单相同的HTML页面上的一个框中。 到目前为止，我收到了JQuery中的一个解决scheme，这个解决scheme非常有用，但是我的经理希望在JavaScript中完成各种原因。 到目前为止，我已经走了一段路，但是很多人为此使用JQuery，而香草javascript方法的例子很less。 目前，在提交页面抛出“不能POST / 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>
任何指针将是伟大的，谢谢！
除了两行外，其他都看起来不错：
var num1 = getElementById("numa"); var num2 = getElementById("numb");
它应该是这样的
var num1 = document.getElementById("numa"); var num2 = document.getElementById("numb");
注：更新的HTML代码（添加在窗体中提交并从button中删除）
<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>