Question

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

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

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

这些是作业的说明：

编写处理程序以接受对URL＆＃34; / calc /＆＃34;
上面的网址应该是2个URL参数，长度和宽度。例如。 http://localhost/calc/?length=1&width=1
在处理程序的主体中，计算区域和周长并在JSON对象中返回它们，如下所示：{＆＃34; area＆＃34;：1，＆＃34; perimeter＆＃34;：1}

编写另一个接受URL请求的处理程序＆＃34; /＆＃34;，此处理程序应返回附加的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上xhttp.onload的回复。这是一个简单的例子

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那一刻。

Javascript和XHR服务器请求

1 个答案: