Javascript 和 XHR 服务器请求

Question

我目前正在为我的 JavaScript 课程做作业，需要一些帮助或指导才能开始。这是一个非常简单的程序，通过用户输入获取长度和宽度，然后计算面积和周长并显示在文本框中。

这部分很简单，但是我们必须更改程序，以便将用户输入的长度和宽度发送到 node.js express 服务器。服务器应该使用 url 中的 2 个用户输入的参数进行计算。计算完成后，面积和周长值将在 json 对象中返回。

现在我遇到的两个问题是我无法将用户输入发送到快速服务器，我也无法弄清楚如何在原始 .js 文件中捕获返回的 json 对象。下面是主要的 JavaScript 文件，后面是 express 服务器文件。非常感谢任何帮助或指示。

这些是作业的说明：

• 编写处理程序以接受对 URL“/calc/”的请求
• 上面的 URL 应该有 2 个 URL 参数，长度和宽度。例如。 http://localhost/calc/?length=1&width=1
• 在处理程序的主体中，计算面积和周长并以 JSON 对象的形式返回，如下所示：{ "area": 1, "perimeter": 1 }

• 编写另一个处理程序来接受对 URL“/”的请求，这个处理程序应该返回附加的 HTML 文件 - 更新 HTML 和 JS 文件（附件）以利用您的新应用程序服务器，而不是在客户端计算。

  function calculate(){
  
  // alert statements are great for troublshooting, they let you know where you are in the program.
  console.log('You just clicked the button!');
  alert("This must be a number, not something else");
  
  /*
  Get a reference to the HTML element with the ID of 'length'.
  Please note, this is a reference to the HTML element, NOT WHAT YOU TYPED IN THE BOX!
  If you need to get what you typed in the box you will nedd to access the element's 'value' attribute, then convert it to a float.
  */
  var length_element = document.getElementById('length');
  var length = parseFloat(length_element.value);
  
  var width_element = document.getElementById('width');
  var width = parseFloat(width_element.value);
  
  
  // Now make an XHR request to your server via the URL below.
  // http://localhost:3000/calc?length=length&width=width
  // Capture the results in the variables below
  var xhttp = new XMLHttpRequest();
  xhttp.open("GET", "http://localhost:3000/calc/?legnth=" + length + "&width=" + width, true);
  xhttp.send(null);
  
  
  // Don't know what to do beyond this part or where to go from here.
  var area =
  var perimeter =
  
  
  
  // If you need to set the 'value' attribute of a text box you can do it like this
  var area_element = document.getElementById('area');
  area_element.value = area;
  
  var perimeter_element = document.getElementById('perimeter');
  perimeter_element.value = perimeter;
  
  }
  

  第二个文件

  const express = require('express');
  const app = express();
  
  var path = require("path");
  
  app.get('/calc/', function (req, res) {
      var length = req.query.length;
      var width = req.query.width; 
      var area = length*width;
      var perimeter = ((length*2) + (width*2));
      res.send( { "area": area, "perimeter": perimeter });
  });
  
  app.get('/', function(req,res){
      res.sendFile(path.join(__dirname+'/index.html'));
      })
  
  app.listen(3000, function () {
    console.log('Example app listening on port 3000!')
  });
  

Answer 1

您基本上需要在xhttp.onload 上阅读xhttp 的响应。这是一个简单的例子

var xhttp = new XMLHttpRequest();
xhttp.open("GET", "http://localhost:3000/calc/?legnth=" + length + "&width=" + width, true);
xhttp.send();

xhttp.onload = function (e) {
    var response = xhttp.response;
}

您可能需要根据服务器脚本发送的内容来解析响应数据。

还有其他的东西，比如Content-Type 标头encoding 等，以获得更完整的解决方案，但假设你需要坚持基本的JavaScript，你可以暂时取消JSON.parse。