将JQuery ajax调用转换为原始Javascript-无法POST/public/错误 [英] Converting JQuery ajax call to vanilla Javascript - Cannot POST /public/ error

问题描述

因此，这是对我昨天遇到的一个问题的轻微跟进(

So this is a slight follow up to a question I had yesterday (Update HTML input value in node.js without changing pages), I'm attempting to submit a HTML form, send an ajax request to my server which supplies two numbers, these numbers are added on the server and then shown in a box on the same HTML page as the form. So far I received a solution in JQuery which was extremely useful, however my manager wants it done in javascript for various reasons. I've had a go so far, but as many people use JQuery for this, examples of a vanilla javascript method are few and far between. At present, on submission a page is thrown saying "Cannot POST /public/", I'm new to ajax so I'm reasonably sure the problem lies there.

我的(有效的)JQuery代码:

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

我尝试转换为javascript:

My attempt at converting to 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表单，

For completion, my HTML form:

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

任何指针都很好，谢谢！

Any pointers would be great, thanks!

推荐答案

除以下两行外，其他所有内容看起来都不错:

all looks good except the two lines:

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

应该是这样

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

注意:更新的html代码(在表单提交时添加了HTML代码，并已从按钮中删除)

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

这篇关于将JQuery ajax调用转换为原始Javascript-无法POST/public/错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！