Question

所以这是我昨天提出的一个问题的轻微跟进（Update HTML input value in node.js without changing pages），我正在尝试提交HTML表单，向我的服务器发送ajax请求，该服务器提供两个数字，这些数字被添加在服务器上，然后显示在与表单相同的HTML页面上的框中。到目前为止，我收到了一个非常有用的JQuery解决方案，但是我的经理想要在javascript中完成各种原因。到目前为止我已经开始了，但是由于许多人使用JQuery，所以香草javascript方法的例子很少。目前，在提交页面时会抛出“不能发布/公开/”的页面，我是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>

将JQuery ajax调用转换为vanilla Javascript - 无法POST / public / error

1 个答案: